@charset "UTF-8";

/* ==========================================================================
   GLOBAL STYLES & VARIABLES
   ========================================================================== */

/* Modernes Variablen-System für Hell- und Dunkelmodus */
:root, html[data-theme="light"] {
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-color: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --input-bg: #f8fafc;
    --accent-color: #ff9f43; 
    --accent-gradient: linear-gradient(135deg, #ff9f43 0%, #ff8008 100%);
    --danger-color: #ef4444;
    --success-color: #10b981;
    --info-color: #3b82f6;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    
    --radius: 12px;
    --radius-lg: 20px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dunkler Modus */
html[data-theme="dark"] {
    --bg-color: #111827;
    --card-bg: #1f2937;
    --text-color: #f9fafb;
    --text-muted: #a7b0c0;
    --border-color: #374151;
    --input-bg: #151c2b;

    --accent-color: #ff9f43;
    --accent-gradient: linear-gradient(135deg, #ffb15c 0%, #ff7a1a 100%);

    --danger-color: #ff5f6d;
    --success-color: #34d399;
    --info-color: #60a5fa;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bg-color: #111827;
        --card-bg: #1f2937;
        --text-color: #f9fafb;
        --text-muted: #a7b0c0;
        --border-color: #374151;
        --input-bg: #151c2b;
    }
}

/* ==========================================================================
   📱 NATIVE APP FEELING (Anti-Browser-Verhalten)
   ========================================================================== */

/* Verhindert das graue Aufblinken beim Antippen auf dem iPhone */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* Verhindert versehentliches Text-Markieren und das "Kopieren"-Popup */
body {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Ausnahmen: In Eingabefeldern und im Chat MUSS man markieren dürfen! */
input, textarea, select, .chat-bubble {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

/* Kein "Bild speichern" Menü auf dem Logo und den Avataren */
img {
    pointer-events: none !important; 
}

/* ==========================================================================
   BASE LAYOUT & HEADER
   ========================================================================== */

html {
    /* FIX: Verhindert das weiße Aufblitzen der Leinwand im Dark Mode */
    background-color: var(--bg-color);
}

body { 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color); 
    color: var(--text-color); 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header { 
    background-color: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    padding: calc(env(safe-area-inset-top) + 20px) 20px 16px; 
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05); 
    position: sticky; 
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] header {
    background-color: rgba(30, 41, 59, 0.95);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

header h1 { 
    margin: 0; 
    font-size: clamp(18px, 5vw, 22px); 
    font-weight: 800; 
    letter-spacing: -0.5px; 
    color: var(--text-color);
    margin-bottom: 4px;
}

.container { 
    max-width: 1000px; 
    margin: 40px auto; 
    padding: 0 24px; 
    flex: 1; 
    width: 100%;
    box-sizing: border-box; 
}

@media (max-width: 1024px) {
    .container button,
    .modal-content button,
    .btn-submit {
        max-width: 100%;
        box-sizing: border-box;
    }

    header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
        padding-top: calc(env(safe-area-inset-top) + 12px) !important;
        padding-bottom: 12px !important;
    }

    header button {
        width: auto !important;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    header h1 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
}

footer { 
    background-color: var(--card-bg); 
    border-top: 1px solid var(--border-color); 
    padding: 40px 20px; 
    margin-top: 60px; 
    font-size: 14px;
    color: var(--text-muted); 
    text-align: center; 
    padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* ==========================================================================
   FEED, BEITRÄGE & TABS (Premium Layout)
   ========================================================================== */

.post-card { 
    background-color: var(--card-bg);
    border: 1px solid var(--border-color); 
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); 
    overflow: hidden;
    transition: var(--transition);
}

.badge-admin {
    background-color: rgba(255, 159, 67, 0.15);
    color: #e67e22;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: inline-block;
}

.tabs-container {
    background-color: var(--border-color);
    padding: 4px;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
}

.tab-button {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    cursor: pointer;
}

.tab-button.active {
    background-color: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ==========================================================================
   MODALS (Popups) & ANIMATIONEN
   ========================================================================== */

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.modal, .modal-overlay { 
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); 
    justify-content: center;
    align-items: center; z-index: 1000; 
    animation: fadeInModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
    padding: 20px; box-sizing: border-box;
}

.modal-content { 
    background-color: var(--card-bg); 
    padding: 36px; 
    border-radius: var(--radius-lg); 
    border: 1px solid var(--border-color); 
    width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto; box-sizing: border-box; 
    box-shadow: var(--shadow-lg); 
    position: relative; margin: auto; 
    transform: translateY(10px);
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-content h3 { 
    color: var(--text-color); 
    margin-top: 0;
    margin-bottom: 24px; 
    font-size: 24px; font-weight: 800; 
    letter-spacing: -0.5px; padding-right: 40px; 
}

.modal-close-container { position: absolute; top: 20px; right: 24px; z-index: 1010; }
.modal-close-trigger { 
    background: var(--bg-color); 
    border: none; border-radius: 50%;
    color: var(--text-muted); 
    width: 36px; height: 36px;
    display: flex;
    align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer; line-height: 1; 
    transition: var(--transition); 
}
.modal-close-trigger:hover { 
    color: var(--text-color);
    background: var(--border-color);
    transform: rotate(90deg); 
}

.modal-divider { 
    display: flex; align-items: center; text-align: center; 
    color: var(--text-muted); font-size: 13px;
    font-weight: 600; 
    margin: 28px 0; text-transform: uppercase; letter-spacing: 1px; 
}
.modal-divider::before, .modal-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); }
.modal-divider:not(:empty)::before { margin-right: 1em; }
.modal-divider:not(:empty)::after { margin-left: 1em; }

.modal-footer { 
    margin-top: 28px; padding-top: 20px;
    border-top: 1px solid var(--border-color); 
    display: flex; justify-content: center; gap: 8px; font-size: 14px; color: var(--text-muted); 
}
.modal-footer a { color: var(--accent-color);
    text-decoration: none; cursor: pointer; font-weight: 700; transition: var(--transition); }
.modal-footer a:hover { opacity: 0.8; }

@media (max-width: 1024px) {
    .modal, .modal-overlay { padding: 16px; }
    .modal-content { padding: 28px 20px; border-radius: 24px; }
}

/* ==========================================================================
   🔧 FEHLERBEHEBUNGEN UI (Screenshots 1-3)
   ========================================================================== */

/* --- FIX 1: Einheitliche Größe der Input-Felder --- */
input, textarea, select {
    box-sizing: border-box !important;
    font-family: inherit;
    font-size: 14px !important; 
}

.form-group input,
.hit-input-group input,
.modal-content input,
#login-form input {
    padding: 12px 16px !important; 
    height: auto !important; 
}

/* --- FIX 2: Header-Überlappung verhindern --- */
header .header-right,
header #header-user-actions-div,
#auth-status-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px !important; 
}

#header-user-name,
#auth-status-container > span {
    margin: 0 4px; 
    white-space: nowrap; 
}

#btn-logout {
    padding: 6px 12px !important; 
}

@media (max-width: 380px) {
    #header-user-name,
    #auth-status-container > span {
        display: none !important; 
    }
    header h1 {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */

.form-group, .hit-input-group { margin-bottom: 24px; display: flex; flex-direction: column; }
.form-group label, .hit-input-group label { 
    font-size: 13px; font-weight: 700; color: var(--text-muted); 
    margin-bottom: 8px; text-transform: uppercase;
    letter-spacing: 0.5px; 
}

.form-group input, .hit-input-group input, .modal-content input, .modal-content textarea { 
    background-color: var(--input-bg);
    border: 2px solid var(--border-color); 
    color: var(--text-color); padding: 14px 16px; border-radius: var(--radius); 
    font-size: 15px; transition: var(--transition); font-family: inherit;
}
.form-group input:hover, .hit-input-group input:hover { border-color: #cbd5e1; }
.form-group input:focus, .hit-input-group input:focus, .modal-content input:focus, .modal-content textarea:focus { 
    outline: none;
    border-color: var(--accent-color); 
    box-shadow: 0 0 0 4px rgba(255, 159, 67, 0.15); 
    background-color: var(--card-bg);
}

/* ==========================================================================
   BUTTONS & ACTION BARS
   ========================================================================== */

.btn-primary-auth, .btn-post, .btn-submit { 
    background: var(--accent-gradient);
    color: #ffffff; border: none; 
    padding: 14px 28px; font-size: 15px; font-weight: 700; 
    border-radius: var(--radius); cursor: pointer; width: 100%;
    box-shadow: 0 4px 14px 0 rgba(255, 159, 67, 0.3); 
    transition: var(--transition); 
}
.btn-submit { padding: 14px 32px; margin-top: 10px; width: auto;}
.btn-primary-auth:hover, .btn-post:hover, .btn-submit:hover { 
    box-shadow: 0 6px 20px rgba(255, 159, 67, 0.4);
    transform: translateY(-2px);
}

/* ✨ NATIVE APP FEELING: Taktiles Button-Feedback */
.btn-primary-auth:active, .btn-post:active, .btn-submit:active, .btn-secondary-auth:active, .btn-danger-block:active { 
    transform: scale(0.96) !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: transform 0.1s !important;
}

.btn-secondary-auth { 
    background-color: var(--card-bg); color: var(--text-color); border: 2px solid var(--border-color);
    padding: 14px 28px; font-size: 15px; font-weight: 700; border-radius: var(--radius); 
    cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center;
    gap: 10px; transition: var(--transition); 
}
.btn-secondary-auth:hover { 
    background-color: var(--bg-color); border-color: #cbd5e1;
    transform: translateY(-2px);
}

.btn-danger-block { 
    background-color: transparent; color: var(--danger-color); border: 2px solid rgba(239, 68, 68, 0.3); 
    padding: 12px;
    width: 100%; font-weight: 700; border-radius: var(--radius); 
    cursor: pointer; margin-top: 20px; transition: var(--transition); 
}
.btn-danger-block:hover { 
    background-color: var(--danger-color);
    color: #fff; border-color: var(--danger-color); 
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.floating-action-bar {
    position: fixed;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px); 
    max-width: 400px;
    z-index: 90;
}

.floating-action-bar button, .floating-action-bar .btn-post {
    width: 100%;
    border-radius: 100px;
    padding: 16px 24px;
    font-size: 16px;
    box-shadow: 0 10px 25px rgba(255, 159, 67, 0.4);
}



/* ==========================================================================
   🎯 PREMIUM TUNING OVERRIDES (Vektor-Icons, Logo & Pill-Logout)
   ========================================================================= */

/* Logo auf Actionsport-Design trimmen */
header h1 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    font-size: clamp(20px, 5vw, 24px) !important;
}

header h1 .logo-accent {
    color: var(--accent-color) !important;
}

header p[data-txt="sub-title"] {
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    color: var(--accent-color) !important;
    margin-top: 4px !important;
}

/* Perfekte Zentrierung & Steuerung der neuen SVG-Icons */
header .theme-toggle-btn svg {
    display: block;
    stroke: var(--text-color);
    transition: var(--transition);
}

header .theme-toggle-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color) !important;
    box-shadow: 0 6px 15px rgba(255, 159, 67, 0.15) !important;
}

header .theme-toggle-btn:hover svg {
    stroke: var(--accent-color);
}

/* Profil-Avatar edel abheben */
header #btn-open-settings img {
    border: 2px solid var(--accent-color) !important;
    padding: 2px;
    background: var(--card-bg);
    box-shadow: 0 4px 12px rgba(255, 159, 67, 0.2) !important;
    transition: var(--transition) !important;
}
header #btn-open-settings img:hover {
    transform: scale(1.05) rotate(2deg);
}

/* Abmelden-Button im modernen Pill-Design */
header #btn-logout {
    background: rgba(239, 68, 68, 0.05) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: var(--danger-color) !important;
    border-radius: 20px !important;
    padding: 0 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px !important;
    transition: var(--transition) !important;
}

header #btn-logout:hover {
    background: var(--danger-color) !important;
    color: #ffffff !important;
    border-color: var(--danger-color) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
    transform: translateY(-1px);
}


/* ==========================================================================
   💬 INSTAGRAM MESSENGER OVERHAUL (Sleek Chat Bubbles & Hidden Actions)
   ========================================================================== */

/* Das Chat-Fenster flach, clean und randlos wie Instagram DMs */
.chat-history-area { 
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background-color: var(--card-bg) !important; /* Flat Background */
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    box-shadow: var(--shadow-sm) !important;
    height: 400px !important;
}

/* Container-Box für Sprechblase + Steuerung */
.chat-bubble-container {
    display: flex !important;
    flex-direction: column !important;
    max-width: 75% !important;
    width: fit-content !important;
    margin-bottom: 2px !important;
    position: relative !important;
}

/* MEINE NACHRICHTEN (Rechtsbündig) */
.chat-bubble-container:has(.bubble-me) {
    align-self: flex-end !important;
    align-items: flex-end !important;
}

/* PARTNER NACHRICHTEN (Linksbündig) */
.chat-bubble-container:has(.bubble-other) {
    align-self: flex-start !important;
    align-items: flex-start !important;
}

/* Pillenförmige, ultra-smooth Instagram Bubbles */
.chat-bubble {
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    box-shadow: none !important; /* Flat Look */
    word-break: break-word !important;
    transition: var(--transition) !important;
}

/* Eigene Blase: Stilvoller Instagram Neon-Orange-Farbverlauf */
.chat-bubble.bubble-me {
    background: linear-gradient(135deg, #ff9f43 0%, #ff4b2b 100%) !important;
    color: #ffffff !important;
    border-radius: 22px 22px 4px 22px !important;
}

/* Partner Blase: Dezent flaches Hellgrau / Dunkelgrau */
.chat-bubble.bubble-other {
    background: #f1f3f4 !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 22px 22px 22px 4px !important;
}

/* Dunkelmodus-Anpassung für die Partner-Blase */
html[data-theme="dark"] .chat-bubble.bubble-other {
    background: #263238 !important;
    color: #f8fafc !important;
}

/* 🎯 REAL INSTAGRAM LONG-PRESS POPUP VIA CSS */
.chat-bubble-meta {
    display: flex !important;
    gap: 10px !important;
    position: absolute !important;
    bottom: calc(100% + 6px) !important; /* Schwebt wie ein echtes IG-Popup über der Blase */
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    padding: 6px 12px !important;
    border-radius: 30px !important;
    /* Schickes, rundes Aktions-Chip */
    box-shadow: var(--shadow-md) !important;
    z-index: 10 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap !important;
    
    /* Standardmäßig zu 100% unsichtbar und weggedrückt */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) scale(0.85) !important;
    transform-origin: bottom center !important;
    transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.15s !important;
}

/* Positionierung des Overlays anpassen, je nachdem wer sendet */
.chat-bubble-container:has(.bubble-me) .chat-bubble-meta {
    right: 10px !important;
}
.chat-bubble-container:has(.bubble-other) .chat-bubble-meta {
    left: 10px !important;
}

/* 🔥 DAS DESIGN-WUNDER: Beim Antippen/Gedrückthalten (active) oder Hovern ploppt das Menü auf */
.chat-bubble-container:hover .chat-bubble-meta,
.chat-bubble-container:active .chat-bubble-meta,
.chat-bubble:active + .chat-bubble-meta {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.chat-action-link {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important;
    opacity: 0.7 !important;
    transition: var(--transition) !important;
}

.chat-action-link:hover {
    color: var(--accent-color) !important;
    opacity: 1 !important;
}

.chat-action-link.delete:hover {
    color: var(--danger-color) !important;
}

/* Posteingang ("Meine Nachrichten") auf Instagram Listen-Stil trimmen */
#global-inbox-list {
    gap: 4px !important;
}

#global-inbox-list div {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    padding: 14px 8px !important;
    transition: background-color 0.2s ease !important;
}

#global-inbox-list div:last-child {
    border-bottom: none !important;
}

#global-inbox-list div:hover {
    background-color: rgba(255, 159, 67, 0.05) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Sendedose unten minimalistisch einbetten */
#chat-send-form {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
    background: var(--input-bg) !important;
    padding: 4px 4px 4px 14px !important;
    border-radius: 24px !important;
    /* Komplett rundes Instagram-Input */
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    align-items: center !important;
}

#chat-message-input {
    border: none !important;
    background: transparent !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
}

#chat-message-input:focus {
    box-shadow: none !important;
}

#btn-chat-send {
    background: transparent !important;
    /* Transparenter Text-Button wie bei IG */
    color: var(--accent-color) !important;
    box-shadow: none !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    width: auto !important;
}

#btn-chat-send:hover {
    transform: none !important;
    filter: brightness(1.2);
}

/* ==========================================================================
   SOCIAL LOGIN BUTTONS
   ========================================================================== */
.btn-social-google, .btn-social-apple {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
}
.btn-social-google {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid var(--border-color);
}
.btn-social-apple {
    background-color: #000000;
    color: #ffffff;
    border: none;
}
.btn-social-passkey {
    background-color: var(--info-color);
    color: #ffffff;
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
}
.btn-social-passkey:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}
/* ==========================================================================
   FIX: Header-Avatar darf beim Laden kein Layout-Zucken auslösen
   ========================================================================== */


/* ==========================================================================
   MOBILE COMPACT UI – kleinere Buttons, Inputs und Auswahlfelder
   ========================================================================== */

@media (max-width: 768px) {

    /* Eingabefelder allgemein */
    input,
    textarea,
    select {
        font-size: 15px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .hit-input-group input,
    .hit-input-group select,
    .hit-input-group textarea,
    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        min-height: 44px !important;
        height: 44px !important;
        padding: 8px 14px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }

    /* Labels etwas kompakter */
    .form-group label,
    .hit-input-group label {
        font-size: 12px !important;
        margin-bottom: 6px !important;
        letter-spacing: 1px !important;
    }

    /* Abstand zwischen Formulargruppen kleiner */
    .form-group,
    .hit-input-group {
        margin-bottom: 18px !important;
    }

    /* Normale Buttons kleiner */
    button,
    .btn-submit,
    .btn-primary-auth,
    .btn-secondary-auth,
    .btn-post {
        min-height: 44px !important;
        height: auto !important;
        padding: 10px 18px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
    }

    /* Große orange Hauptbuttons etwas schlanker */
    .btn-submit,
    .btn-primary-auth,
    .btn-post {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        font-size: 15px !important;
    }

    /* Karten/Formularboxen innen etwas kompakter */
    .card,
    .form-card,
    .tool-section,
    .modal-content,
    .news-section,
    .hero-section {
        padding: 22px 18px !important;
    }

    /* Selects in Formularen nicht überhoch */
    select {
        line-height: 1.2 !important;
    }

    /* Zwei kleine Felder nebeneinander sauberer */
    .form-row,
    .input-row {
        gap: 12px !important;
    }
}
/* ==========================================================================
   MOBILE ULTRA COMPACT CARDS – kleinere Kästen und Abstände
   ========================================================================== */

@media (max-width: 768px) {

    /* Gesamtseiten-Abstände kleiner */
    .container {
        margin: 22px auto !important;
        padding: 0 16px !important;
    }

    /* Große Inhaltskästen kompakter */
    .hero-section,
    .news-section,
    .card,
    .form-card,
    .tool-section,
    .post-card,
    .dash-card {
        padding: 18px 16px !important;
        margin-bottom: 20px !important;
        border-radius: 18px !important;
    }

    /* Hero-Box auf Startseite deutlich kleiner */
    .hero-section {
        padding: 24px 18px !important;
    }

    .hero-section h2 {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .hero-section p {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    /* News-Box kompakter */
    .news-section {
        padding: 20px 16px !important;
    }

    .news-section-title {
        font-size: 22px !important;
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }

    .news-timeline {
        gap: 18px !important;
    }

    .news-item {
        padding-left: 14px !important;
    }

    .news-date {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .news-item-title {
        font-size: 17px !important;
        margin-bottom: 6px !important;
    }

    .news-item-body {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    /* Formular-Überschriften kleiner */
    .form-card h2,
    .form-card h3,
    .tool-section h2,
    .tool-section h3,
    .card h2,
    .card h3 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }

    /* Trennlinien weniger Abstand */
    hr,
    .section-divider {
        margin: 16px 0 !important;
    }

    /* Dashboard-Karten kompakter */
    .dashboard-grid {
        gap: 14px !important;
        margin-bottom: 30px !important;
    }

    .dash-card {
        padding: 18px 16px !important;
        gap: 10px !important;
    }

    .dash-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        border-radius: 10px !important;
    }

    .dash-title,
    .dash-card-title {
        font-size: 17px !important;
    }

    .dash-desc {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .dash-action {
        font-size: 14px !important;
    }
}
/* ==========================================================================
   MOBILE FORM COMPACT FIX – Planer/Marktplatz kompakter ohne Layoutbruch
   ========================================================================== */

@media (max-width: 768px) {

    .container {
        margin: 24px auto !important;
        padding: 0 18px !important;
    }

    .planner-card,
    .market-card,
    .form-card,
    .tool-section,
    .news-section,
    .hero-section,
    .card {
        padding: 20px 18px !important;
        margin-bottom: 22px !important;
        border-radius: 18px !important;
    }

    .planner-card h2,
    .planner-card h3,
    .market-card h2,
    .market-card h3,
    .form-card h2,
    .form-card h3,
    .tool-section h2,
    .tool-section h3,
    .card h2,
    .card h3 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 18px !important;
    }

    .form-group,
    .hit-input-group {
        margin-bottom: 16px !important;
    }

    .form-group label,
    .hit-input-group label {
        font-size: 12px !important;
        margin-bottom: 6px !important;
        letter-spacing: 1px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .hit-input-group input,
    .hit-input-group select,
    .hit-input-group textarea {
        min-height: 42px !important;
        height: 42px !important;
        padding: 8px 14px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }

    .btn-submit,
    .btn-post,
    .btn-primary-auth {
        min-height: 42px !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
    }

    .planned-match-card,
    .match-card,
    .listing-card,
    .post-card {
        padding: 18px 16px !important;
        margin-bottom: 18px !important;
        border-radius: 18px !important;
    }
}
/* ==========================================================================
   MEIN PLANER MOBILE COMPACT FIX
   ========================================================================== */

@media (max-width: 768px) {
    #planner-section,
    #logged-out-section {
        padding: 16px 14px !important;
        margin-bottom: 18px !important;
        border-radius: 16px !important;
    }

    #planner-section h2 {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    #planner-section h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    #planner-section .form-group {
        margin-bottom: 14px !important;
    }

    #planner-section input {
        height: 40px !important;
        min-height: 40px !important;
        padding: 7px 12px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    #planner-section .btn-post,
    #planner-section .btn-success {
        min-height: 40px !important;
        padding: 9px 14px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    #planner-section h3[style*="margin-top"] {
        margin-top: 24px !important;
    }

    #planner-section > div:first-child {
        padding-bottom: 12px !important;
        margin-bottom: 18px !important;
    }

    .match-item {
        padding: 14px 12px !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }
}
/* ==========================================================================
   PAGE SPECIFIC MOBILE COMPACT FIX – Index, Marktplatz, Community
   ========================================================================== */

@media (max-width: 768px) {

    /* Startseite */
    .hero-section,
    .news-section,
    .dash-card {
        padding: 18px 16px !important;
        margin-bottom: 18px !important;
        border-radius: 16px !important;
    }

    .dashboard-grid {
        gap: 14px !important;
        margin-bottom: 28px !important;
    }

    /* Marktplatz */
    .info-box,
    .form-section,
    .filter-bar,
    .match-card {
        padding: 16px 14px !important;
        margin-bottom: 18px !important;
        border-radius: 16px !important;
    }

    .toggle-selector {
        padding: 12px !important;
        margin-bottom: 16px !important;
        gap: 10px !important;
    }

    .match-list {
        gap: 14px !important;
    }

    /* Community */
    #logged-out-msg,
    #username-setup-section,
    .post-card,
    .comments-wrapper {
        padding: 16px 14px !important;
        margin-bottom: 16px !important;
        border-radius: 16px !important;
    }

    .tabs-container {
        margin-bottom: 16px !important;
    }

    /* Gemeinsame mobile Überschriften */
    .hero-section h2,
    .news-section-title,
    .form-section h2,
    #logged-out-msg h2,
    #username-setup-section h2,
    .dash-title,
    .match-details h3,
    .post-meta h4 {
        line-height: 1.25 !important;
    }
}
/* ==========================================================================
   MOBILE SMALL BUTTON FIX – Buttons wirklich kleiner
   ========================================================================== */

@media (max-width: 768px) {

    button,
    .btn-submit,
    .btn-post,
    .btn-primary-auth,
    .btn-secondary-auth,
    .btn-success,
    .btn-contact,
    .btn-delete,
    .btn-edit,
    .btn-export,
    .btn-mediated,
    .delete-btn {
        min-height: 36px !important;
        height: auto !important;
        padding: 7px 12px !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        border-radius: 10px !important;
    }

    .floating-action-bar button,
    .floating-action-bar .btn-post {
        min-height: 40px !important;
        padding: 9px 14px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
    }

    .tab-button {
        min-height: 34px !important;
        padding: 7px 10px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }

    .modal-close-trigger {
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        font-size: 22px !important;
        border-radius: 50% !important;
    }

    header button,
    header .btn-auth,
    header .theme-toggle-btn,
    header #btn-logout {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    header #btn-open-settings {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
}

/* ==========================================================================
   MOBILE FINAL BUTTON WIDTH FIX v24
   ========================================================================== */

@media (max-width: 768px) {
    body .container button,
    body .container .btn-submit,
    body .container .btn-post,
    body .container .btn-primary-auth,
    body .container .btn-secondary-auth,
    body .container .btn-success,
    body .container .btn-contact,
    body .container .btn-delete,
    body .container .btn-edit,
    body .container .btn-export,
    body .container .btn-mediated,
    body .container .delete-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 34px !important;
        height: auto !important;
        padding: 7px 12px !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        border-radius: 10px !important;
        flex: 0 0 auto !important;
    }

    body .floating-action-bar button,
    body .floating-action-bar .btn-post {
        width: 100% !important;
        min-height: 40px !important;
        padding: 9px 14px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
    }
}



/* ==========================================================================
   EXTRACTED CRITICAL HTML CSS v25
   ========================================================================== */
/* Critical no-flash styles extracted from HTML */
/* Verhindert das weiße Aufblitzen des Hintergrunds */
        html { background-color: #f6f8fc !important; }
        html[data-theme="dark"] { background-color: #0f172a !important; }
        body { visibility: visible !important; }


/* ==========================================================================
   EXTRACTED PAGE CSS v25 – formerly inline <style> blocks
   ========================================================================== */
/* ==========================================================================
   Extracted scoped CSS from analytics.html
   ========================================================================== */
/* ==========================================================================
           ANALYTICS-SPEZIFISCHES LAYOUT (Nutzt nun global.css Variablen)
           ========================================================================== */

body.page-analytics .tool-section select {
background-color: var(--input-bg);
    border: 2px solid var(--border-color); 
    color: var(--text-color); 
    padding: 14px 16px; 
    border-radius: var(--radius); 
    font-size: 15px; 
    font-weight: 700; 
    width: 100%; 
    box-shadow: var(--shadow-sm);
    cursor: pointer; 
    outline: none; 
    appearance: none; 
    transition: var(--transition);
}

body.page-analytics .tool-section select:focus {
border-color: var(--accent-color);
}

body.page-analytics .tool-section .select-wrapper {
position: relative;
    margin-bottom: 24px;
}

body.page-analytics .tool-section .select-wrapper::after {
content: "▼";
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

body.page-analytics .stage-card {
background: var(--card-bg);
            border: 1px solid var(--border-color); 
            border-radius: var(--radius-lg); 
            padding: 24px; 
            margin-bottom: 24px; 
            position: relative; 
            box-shadow: 0 2px 12px rgba(0,0,0,0.03);
            transition: var(--transition);
}

body.page-analytics .stage-card:hover {
transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #cbd5e1;
}

html[data-theme="dark"] body.page-analytics .stage-card:hover {
border-color: var(--text-muted);
}

body.page-analytics .stage-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}

body.page-analytics .stage-title {
font-weight: 800; font-size: 16px; color: var(--text-color); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

body.page-analytics .stage-rank {
background: var(--input-bg); border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--accent-color); box-shadow: var(--shadow-sm);
}

body.page-analytics .course-badge {
font-size: 11px; padding: 4px 8px; border-radius: 6px; background: var(--border-color); color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}

body.page-analytics .bar-container {
margin-bottom: 12px;
}

body.page-analytics .bar-label {
display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
}

body.page-analytics .bar-track {
width: 100%; height: 24px; background: var(--bg-color); border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--border-color); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

body.page-analytics .bar-fill {
height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-size: 12px; font-weight: 800; color: #fff; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-analytics .bar-winner {
background: var(--text-muted);
}

body.page-analytics .bar-me {
background: var(--accent-gradient);
}

body.page-analytics .bar-me.high {
background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
}

body.page-analytics .insight-box {
background: rgba(255, 159, 67, 0.05); border-left: 4px solid var(--accent-color); padding: 12px 16px; font-size: 13px; margin-top: 16px; border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-color); line-height: 1.5;
}

body.page-analytics .btn-small {
background: var(--card-bg); border: 2px solid var(--border-color); color: var(--text-color); font-size: 12px; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 700; transition: var(--transition);
}

body.page-analytics .btn-small:hover {
background: var(--bg-color); border-color: #cbd5e1; transform: translateY(-1px);
}

/* Modal Overlay CSS angepasst an die global.css Logik */

body.page-analytics .modal-overlay {
display: none;
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background-color: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); 
            justify-content: center;
            align-items: center; z-index: 9999; padding: 20px; box-sizing: border-box; 
            animation: fadeInModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.page-analytics .hit-input-group {
margin-bottom: 20px; display: flex; flex-direction: column;
}

body.page-analytics .hit-input-group label {
font-size: 13px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}

body.page-analytics .hit-input-group input {
background-color: var(--input-bg);
            border: 2px solid var(--border-color); 
            color: var(--text-color); 
            padding: 14px 16px; 
            border-radius: var(--radius); 
            font-size: 16px; 
            font-family: inherit; 
            transition: var(--transition); 
            font-weight: 800;
            text-align: center;
}

body.page-analytics .hit-input-group input:focus {
outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 4px rgba(255, 159, 67, 0.15);
}

@media (max-width: 768px) {
body.page-analytics .stage-card {
padding: 16px;
}

body.page-analytics .modal-overlay {
padding: 16px;
}

body.page-analytics .hit-input-group input {
padding: 12px; font-size: 15px;
}
}


/* ==========================================================================
   Extracted scoped CSS from community.html
   ========================================================================== */
/* ==========================================================================
           COMMUNITY LAYOUT
           ========================================================================== */

body.page-community .container {
max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            flex: 1;
            width: 100%;
            box-sizing: border-box;
            position: relative;
}

body.page-community .post-header {
display: flex;
            align-items: center;
            margin-bottom: 15px;
            gap: 15px;
}

body.page-community .avatar {
width: 40px;
            height: 40px;
            background-color: var(--border-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 16px;
            color: var(--text-color);
            border: 1px solid var(--border-color);
}

body.page-community .post-meta h4 {
margin: 0;
            font-size: 15px;
            color: var(--text-color);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
}

body.page-community .post-meta span {
font-size: 12px;
            color: var(--text-muted);
}

body.page-community .post-content {
font-size: 15px;
            line-height: 1.6;
            color: var(--text-color);
            white-space: pre-wrap;
}

body.page-community .post-card.admin-post {
border: 2px solid rgba(255, 159, 67, 0.4);
            background-color: rgba(255, 159, 67, 0.03);
}

body.page-community .avatar.admin-avatar {
background-color: var(--accent-color);
            color: #fff;
            border-color: var(--accent-color);
}

body.page-community .post-actions-bar {
display: flex;
            gap: 20px;
            margin-top: 15px;
            border-top: 1px solid var(--border-color);
            padding-top: 12px;
            font-size: 13px;
            font-weight: 600;
}

body.page-community .action-trigger {
cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            user-select: none;
            transition: opacity 0.15s;
}

body.page-community .action-trigger:hover {
opacity: 0.7;
}

body.page-community .comments-wrapper {
display: none;
            margin-top: 15px;
            background: var(--input-bg);
            padding: 15px;
            border-radius: var(--radius);
            border: 1px solid var(--border-color);
}

body.page-community .comment-item {
border-bottom: 1px solid var(--border-color);
            padding: 10px 0;
            font-size: 13px;
}

body.page-community .comment-item:last-child {
border-bottom: none;
}

body.page-community .comment-meta {
font-weight: 700;
            color: var(--text-color);
            margin-bottom: 4px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
}

body.page-community .comment-meta span {
color: var(--text-muted);
            font-weight: normal;
}

body.page-community .comment-input-box {
display: flex;
            gap: 10px;
            margin-top: 15px;
}

body.page-community .comment-input-box input {
flex: 1;
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            padding: 10px 14px;
            border-radius: var(--radius);
            font-family: inherit;
            font-size: 13px;
            transition: var(--transition);
}

body.page-community .comment-input-box input:focus {
outline: none;
            border-color: var(--accent-color);
}

body.page-community .comment-input-box button {
background: var(--accent-color);
            color: #fff;
            padding: 10px 16px;
            font-weight: 700;
            border-radius: var(--radius);
            border: none;
            cursor: pointer;
            font-size: 13px;
            transition: var(--transition);
}

body.page-community .comment-input-box button:hover {
opacity: 0.9;
            transform: translateY(-1px);
}

body.page-community #logged-out-msg,
body.page-community #username-setup-section {
text-align: center;
            padding: 40px 20px;
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            margin-top: 20px;
            box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
body.page-community .container {
max-width: 600px;
                margin: 0 auto !important;
                padding: 16px 14px !important;
}

body.page-community .tabs-container {
margin-bottom: 18px !important;
}

body.page-community .tab-button {
padding: 9px 12px !important;
                font-size: 13px !important;
}

body.page-community #logged-out-msg,
body.page-community #username-setup-section {
padding: 22px 16px !important;
                margin-top: 14px !important;
                border-radius: 18px !important;
}

body.page-community #logged-out-msg h2,
body.page-community #username-setup-section h2 {
font-size: 22px !important;
                margin-bottom: 12px !important;
}

body.page-community #logged-out-msg p,
body.page-community #username-setup-section p {
font-size: 14px !important;
                line-height: 1.45 !important;
                margin-bottom: 18px !important;
}

body.page-community .post-card {
padding: 16px 14px !important;
                margin-bottom: 16px !important;
                border-radius: 16px !important;
}

body.page-community .post-header {
gap: 12px !important;
                margin-bottom: 12px !important;
}

body.page-community .avatar {
width: 36px !important;
                height: 36px !important;
                min-width: 36px !important;
                min-height: 36px !important;
                font-size: 15px !important;
}

body.page-community .post-meta h4 {
font-size: 14px !important;
}

body.page-community .post-meta span {
font-size: 11px !important;
}

body.page-community .post-content {
font-size: 14px !important;
                line-height: 1.45 !important;
}

body.page-community .post-actions-bar {
gap: 12px !important;
                padding-top: 10px !important;
                margin-top: 12px !important;
                font-size: 12px !important;
                flex-wrap: wrap !important;
}

body.page-community .comments-wrapper {
padding: 12px !important;
                margin-top: 12px !important;
                border-radius: 14px !important;
}

body.page-community .comment-input-box {
gap: 8px !important;
}

body.page-community .comment-input-box input {
height: 38px !important;
                padding: 7px 10px !important;
                font-size: 13px !important;
}

body.page-community .comment-input-box button {
min-height: 38px !important;
                padding: 7px 12px !important;
                font-size: 13px !important;
}

body.page-community #groups-section {
padding: 24px 16px !important;
}

body.page-community .modal-content {
padding: 22px 16px !important;
                border-radius: 20px !important;
}

body.page-community #post-content {
min-height: 90px !important;
                padding: 12px !important;
                font-size: 14px !important;
}

body.page-community .floating-action-bar {
width: calc(100% - 28px) !important;
}

body.page-community .floating-action-bar button {
min-height: 44px !important;
                padding: 11px 16px !important;
                font-size: 14px !important;
}
}


/* ==========================================================================
   Extracted scoped CSS from doppel-aa.html
   ========================================================================== */
/* ==========================================================================
           DOUBLE-ALPHA SNIPER - SPEZIFISCHES LAYOUT (Nutzt global.css Variablen)
           ========================================================================== */

body.page-doppel-aa .container {
max-width: 1000px; margin: 40px auto; padding: 0 24px;
}

body.page-doppel-aa .info-box {
background-color: rgba(59, 130, 246, 0.08); 
            border-left: 4px solid var(--info-color); 
            color: var(--text-color); 
            padding: 16px; 
            margin-bottom: 30px; 
            border-radius: var(--radius); 
            font-size: 14px; 
            border: 1px solid var(--border-color);
            border-left-width: 4px;
}

body.page-doppel-aa .danger-box {
background-color: rgba(239, 68, 68, 0.06); 
            border: 2px dashed rgba(239, 68, 68, 0.2);
            color: var(--danger-color); 
            padding: 24px; 
            margin-bottom: 30px; 
            border-radius: var(--radius-lg); 
            font-size: 15px; 
            font-weight: 700; 
            text-align: center;
}

body.page-doppel-aa .filter-bar {
background-color: var(--card-bg); 
            border: 1px solid var(--border-color); 
            border-radius: var(--radius-lg); 
            padding: 20px; 
            margin-bottom: 32px; 
            box-shadow: var(--shadow-sm); 
            display: flex; 
            flex-wrap: wrap; 
            gap: 16px; 
            align-items: flex-end;
}

body.page-doppel-aa .filter-group {
display: flex; flex-direction: column; flex: 1; min-width: 180px;
}

body.page-doppel-aa .filter-group label {
font-size: 12px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; color: var(--text-muted); letter-spacing: 0.5px;
}

/* Select-Angleichung an die restliche Plattform */

body.page-doppel-aa select {
background-color: var(--input-bg); 
            border: 2px solid var(--border-color); 
            color: var(--text-color); 
            padding: 12px 14px; 
            border-radius: var(--radius); 
            font-size: 14px; 
            font-weight: 600; 
            cursor: pointer; 
            outline: none; 
            transition: var(--transition);
}

body.page-doppel-aa select:focus {
border-color: var(--accent-color);
}

body.page-doppel-aa .match-list {
display: flex; flex-direction: column; gap: 20px;
}

body.page-doppel-aa .match-card {
background-color: var(--card-bg); 
            border-radius: var(--radius-lg); 
            padding: 24px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border: 1px solid var(--border-color); 
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); 
            position: relative; 
            overflow: hidden;
            transition: var(--transition);
}

body.page-doppel-aa .match-card:hover {
transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #cbd5e1;
}

html[data-theme="dark"] body.page-doppel-aa .match-card:hover {
border-color: var(--text-muted);
}

body.page-doppel-aa .match-card::before {
content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; background-color: var(--accent-color);
}

body.page-doppel-aa .match-details h3 {
margin: 0 0 10px 0; color: var(--text-color); font-size: 18px; font-weight: 800; letter-spacing: -0.5px;
}

body.page-doppel-aa .match-details h3 a {
color: inherit; text-decoration: none; transition: var(--transition);
}

body.page-doppel-aa .match-details h3 a:hover {
color: var(--accent-color); text-decoration: underline;
}

body.page-doppel-aa .match-actions {
display: flex; flex-direction: column; gap: 10px; min-width: 180px;
}

body.page-doppel-aa .badge-container {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}

body.page-doppel-aa .badge {
background-color: rgba(255, 159, 67, 0.1); color: var(--accent-color); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; display: inline-block; border: 1px solid rgba(255, 159, 67, 0.15);
}

body.page-doppel-aa .badge-meta {
background-color: var(--input-bg); color: var(--text-muted); border: 1px solid var(--border-color);
}

body.page-doppel-aa .badge-date {
background-color: rgba(59, 130, 246, 0.08); color: var(--info-color); border: 1px solid rgba(59, 130, 246, 0.15);
}

body.page-doppel-aa .btn-contact {
background: var(--accent-gradient); 
            color: #ffffff; 
            border: none; 
            padding: 12px 24px; 
            font-weight: 700; 
            border-radius: var(--radius); 
            cursor: pointer; 
            font-size: 14px; 
            transition: var(--transition); 
            text-align: center; 
            box-shadow: 0 4px 14px rgba(255, 159, 67, 0.3);
}

body.page-doppel-aa .btn-contact:hover {
transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 159, 67, 0.4);
}

body.page-doppel-aa .btn-delete {
background-color: transparent; 
            color: var(--danger-color); 
            border: 2px solid rgba(239, 68, 68, 0.3); 
            padding: 10px 16px; 
            font-weight: 700; 
            border-radius: var(--radius); 
            cursor: pointer; 
            font-size: 13px; 
            transition: var(--transition); 
            text-align: center;
}

body.page-doppel-aa .btn-delete:hover {
background-color: var(--danger-color); color: #ffffff; border-color: var(--danger-color);
}

/* --- MODAL INPUT GRID CONFIGS --- */

body.page-doppel-aa .modal {
display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background-color: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); 
            justify-content: center; align-items: center; z-index: 1000; padding: 20px; box-sizing: border-box; 
            animation: fadeInModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.page-doppel-aa .modal-content {
background-color: var(--card-bg); padding: 36px; border-radius: var(--radius-lg); 
            border: 1px solid var(--border-color); width: 100%; max-width: 580px; position: relative; 
            max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); margin: auto;
}

body.page-doppel-aa .modal-close-trigger {
background: var(--bg-color); border: none; border-radius: 50%; color: var(--text-muted); font-size: 24px; cursor: pointer; position: absolute; top: 20px; right: 24px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: var(--transition); z-index: 1010;
}

body.page-doppel-aa .modal-close-trigger:hover {
color: var(--text-color); background: var(--border-color); transform: rotate(90deg);
}

body.page-doppel-aa .form-row {
display: flex; gap: 16px; margin-bottom: 0;
}

body.page-doppel-aa .form-row .form-group {
flex: 1;
}

body.page-doppel-aa .form-group {
margin-bottom: 14px; display: flex; flex-direction: column;
}

body.page-doppel-aa .form-group label {
font-size: 12px; font-weight: 600; color: var(--text-color); margin-bottom: 6px; text-transform: uppercase;
}

body.page-doppel-aa .form-group input,
body.page-doppel-aa .form-group select {
background-color: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-color); padding: 10px; border-radius: var(--radius); font-size: 14px; box-sizing: border-box;
}

body.page-doppel-aa .form-group input:focus,
body.page-doppel-aa .form-group select:focus {
outline: none; border-color: var(--accent-color);
}

body.page-doppel-aa .radio-container {
display: flex; gap: 24px; padding: 12px 0; font-size: 15px;
}

body.page-doppel-aa .radio-label {
display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700 !important; text-transform: none !important; color: var(--text-color);
}

body.page-doppel-aa .radio-label input {
cursor: pointer; margin: 0; width: 18px; height: 18px; accent-color: var(--accent-color);
}

body.page-doppel-aa .checkbox-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; background: var(--input-bg); padding: 16px; border-radius: var(--radius); border: 2px dashed var(--border-color);
}

body.page-doppel-aa .checkbox-grid .checkbox-group {
display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-color); font-weight: 600;
}

body.page-doppel-aa .checkbox-grid .checkbox-group input {
cursor: pointer; width: 18px; height: 18px; accent-color: var(--accent-color); margin: 0;
}

body.page-doppel-aa .checkbox-group-terms {
display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-color); margin-bottom: 16px;
}

body.page-doppel-aa .checkbox-group-terms input {
cursor: pointer; width: 18px; height: 18px; accent-color: var(--accent-color); margin: 0;
}

body.page-doppel-aa .btn-primary-auth {
background-color: var(--accent-color); color: #ffffff; border: none; padding: 12px 24px; font-size: 14px; font-weight: 600; border-radius: var(--radius); cursor: pointer; width: 100%; margin-top: 10px; box-shadow: var(--shadow-sm); transition: var(--transition);
}

body.page-doppel-aa .btn-primary-auth:disabled {
opacity: 0.5; cursor: not-allowed;
}

body.page-doppel-aa .btn-primary-auth:hover:not(:disabled) {
transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,159,67,0.3);
}

/* 📱 MOBILE OPTIMIERUNG */

@media (max-width: 650px) {
body.page-doppel-aa .form-row {
flex-direction: column; gap: 0;
}

body.page-doppel-aa .form-row .form-group {
width: 100%;
}

body.page-doppel-aa .checkbox-grid {
grid-template-columns: 1fr;
}

body.page-doppel-aa .filter-bar {
flex-direction: column; align-items: stretch; gap: 12px;
}

body.page-doppel-aa .modal-content {
padding: 28px 20px;
}

body.page-doppel-aa .radio-container {
flex-direction: column; gap: 12px;
}

body.page-doppel-aa .match-card {
flex-direction: column; align-items: stretch; gap: 16px;
}

body.page-doppel-aa .match-actions {
width: 100%;
}
}


/* ==========================================================================
   Extracted scoped CSS from freie-matches.html
   ========================================================================== */
/* ==========================================================================
           FREIE MATCHES - SPEZIFISCHES LAYOUT
           ========================================================================== */

body.page-freie-matches .info-box {
background-color: rgba(59, 130, 246, 0.08);
            border-left: 4px solid var(--info-color);
            color: var(--text-color);
            padding: 16px; 
            margin-bottom: 30px; 
            border-radius: var(--radius);
            font-size: 14px;
            line-height: 1.5;
            border: 1px solid var(--border-color);
            border-left-width: 4px;
}

body.page-freie-matches .filter-container {
display: flex;
            gap: 15px; 
            flex-wrap: wrap; 
            margin-bottom: 30px;
            background-color: var(--card-bg);
            padding: 16px 20px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
}

body.page-freie-matches .filter-container select {
padding: 12px 16px;
            border-radius: var(--radius); 
            background-color: var(--input-bg); 
            color: var(--text-color); 
            border: 2px solid var(--border-color);
            outline: none;
            font-family: inherit;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
}

body.page-freie-matches .filter-container select:focus,
body.page-freie-matches .filter-container select:hover {
border-color: var(--info-color);
            background-color: var(--card-bg);
}

body.page-freie-matches .match-list {
display: flex; flex-direction: column; gap: 20px;
}

body.page-freie-matches .match-card {
background-color: var(--card-bg);
            border-radius: var(--radius-lg); 
            padding: 24px;
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border: 1px solid var(--border-color);
            position: relative; 
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
            transition: var(--transition);
}

body.page-freie-matches .match-card:hover {
transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            border-color: var(--info-color);
}

body.page-freie-matches .match-card::before {
content: "";
            position: absolute; 
            top: 0; 
            left: 0; 
            bottom: 0; 
            width: 6px; 
            background-color: var(--success-color);
}

body.page-freie-matches .match-details h3 {
margin: 0 0 10px 0;
            color: var(--text-color); 
            font-size: 18px; 
            font-weight: 800; 
            display: flex; 
            align-items: center; 
            gap: 10px;
}

body.page-freie-matches .badge-container {
display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}

body.page-freie-matches .badge-datum {
background-color: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: var(--shadow-sm);
}

body.page-freie-matches .badge {
background-color: rgba(16, 185, 129, 0.1); color: var(--success-color); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; border: 1px solid rgba(16, 185, 129, 0.2);
}

body.page-freie-matches .badge-region {
background-color: rgba(59, 130, 246, 0.1); color: var(--info-color); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; border: 1px solid rgba(59, 130, 246, 0.2);
}

body.page-freie-matches .badge-lvl {
background-color: rgba(139, 92, 246, 0.1); color: #8b5cf6; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; border: 1px solid rgba(139, 92, 246, 0.2);
}

body.page-freie-matches .badge-disziplin {
background-color: rgba(245, 158, 11, 0.1); color: #f59e0b; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; border: 1px solid rgba(245, 158, 11, 0.2);
}

body.page-freie-matches .card-actions {
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}

body.page-freie-matches .btn-contact {
background: linear-gradient(135deg, var(--info-color) 0%, #2563eb 100%);
            color: #ffffff; 
            border: none;
            padding: 12px 24px; 
            font-weight: 700; 
            border-radius: var(--radius); 
            text-decoration: none; 
            text-align: center; 
            cursor: pointer; 
            font-size: 14px;
            box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.3);
            transition: var(--transition);
}

body.page-freie-matches .btn-contact:hover {
transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

body.page-freie-matches .loading-msg {
text-align: center; color: var(--text-muted); padding: 20px; font-style: italic; font-weight: 600;
}

@media (max-width: 768px) {
body.page-freie-matches .info-box {
padding: 16px; border-radius: 16px;
}

body.page-freie-matches .filter-container {
flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border-radius: 16px;
}

body.page-freie-matches .filter-container select {
width: 100%;
}

body.page-freie-matches .match-card {
flex-direction: column; align-items: stretch; gap: 16px; padding: 20px;
}

body.page-freie-matches .card-actions {
align-items: flex-start; width: 100%; border-top: 1px solid var(--border-color); padding-top: 16px;
}

body.page-freie-matches .btn-contact {
width: 100%; text-align: center; box-sizing: border-box;
}
}


/* ==========================================================================
   Extracted scoped CSS from impressum.html
   ========================================================================== */
/* ==========================================================================
           IMPRESSUM - SPEZIFISCHES LAYOUT (Nutzt global.css Variablen)
           ========================================================================== */

body.page-impressum .impressum-content {
background-color: var(--card-bg); 
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 32px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 40px;
}

body.page-impressum .impressum-content h2 {
color: var(--text-color); 
            margin-top: 40px; 
            border-bottom: 2px solid var(--bg-color);
            padding-bottom: 12px;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.5px;
}

body.page-impressum .impressum-content h2:first-of-type {
margin-top: 0;
}

body.page-impressum .impressum-content h3 {
color: var(--text-color); 
            margin-top: 32px; 
            font-size: 16px;
            font-weight: 700;
}

body.page-impressum .impressum-content p,
body.page-impressum .impressum-content li {
font-size: 14px; 
            color: var(--text-muted); 
            line-height: 1.6;
}

body.page-impressum .impressum-content a {
color: var(--info-color); text-decoration: none; font-weight: 600;
}

body.page-impressum .impressum-content a:hover {
text-decoration: underline;
}

body.page-impressum .back-btn {
display: inline-flex; 
            align-items: center; 
            margin-bottom: 24px; 
            background-color: var(--card-bg); 
            color: var(--text-color); 
            padding: 10px 18px; 
            border: 1px solid var(--border-color); 
            border-radius: var(--radius); 
            text-decoration: none; 
            font-weight: 700; 
            font-size: 13px; 
            box-shadow: var(--shadow-sm); 
            transition: var(--transition);
}

body.page-impressum .back-btn:hover {
background-color: var(--bg-color); 
            border-color: #cbd5e1; 
            transform: translateY(-2px);
}

html[data-theme="dark"] body.page-impressum .back-btn:hover {
border-color: var(--text-muted);
}

body.page-impressum .impressum-content hr {
border: 0; border-top: 1px solid var(--border-color); margin: 40px 0;
}

body.page-impressum .impressum-content ul {
padding-left: 20px;
}

body.page-impressum .impressum-content li {
margin-bottom: 8px;
}

body.page-impressum .alert-box {
background-color: rgba(255, 159, 67, 0.08); 
            border-left: 4px solid var(--accent-color); 
            padding: 16px; 
            margin: 32px 0; 
            border-radius: var(--radius); 
            border: 1px solid var(--border-color); 
            border-left-width: 4px;
}

body.page-impressum .highlight {
color: var(--danger-color); font-weight: 700;
}

@media (max-width: 768px) {
body.page-impressum .impressum-content {
padding: 24px 20px;
}

body.page-impressum .back-btn {
width: 100%; box-sizing: border-box; justify-content: center;
}
}


/* ==========================================================================
   Extracted scoped CSS from index.html
   ========================================================================== */
body.page-index .hero-section {
background: linear-gradient(135deg, rgba(255, 159, 67, 0.12) 0%, rgba(255, 128, 8, 0.05) 100%);
            border: 1px solid rgba(255, 159, 67, 0.15); 
            border-radius: var(--radius-lg); 
            padding: 48px 24px; 
            text-align: center; 
            margin-bottom: 40px; 
            box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] body.page-index .hero-section {
background: linear-gradient(135deg, rgba(255, 159, 67, 0.08) 0%, rgba(255, 128, 8, 0.02) 100%);
            box-shadow: none;
            border-color: rgba(255, 159, 67, 0.1);
}

body.page-index .hero-section h2 {
font-size: clamp(24px, 5vw, 36px); 
            font-weight: 800; 
            margin: 0 0 16px 0; 
            color: var(--text-color); 
            letter-spacing: -0.5px;
}

body.page-index .hero-section p {
font-size: 16px; 
            color: var(--text-muted); 
            max-width: 700px; 
            margin: 0 auto; 
            line-height: 1.6;
}

body.page-index .news-section {
background: var(--card-bg);
            border: 1px solid var(--border-color); 
            border-radius: var(--radius-lg); 
            padding: 32px; 
            box-shadow: var(--shadow-sm); 
            margin-bottom: 40px;
}

body.page-index .news-section-title {
font-size: 20px; 
            font-weight: 800; 
            margin-top: 0; 
            margin-bottom: 24px; 
            color: var(--text-color);
            display: flex; 
            align-items: center; 
            gap: 10px; 
            border-bottom: 2px solid var(--bg-color); 
            padding-bottom: 16px;
}

body.page-index .news-timeline {
display: flex; 
            flex-direction: column; 
            gap: 28px;
}

body.page-index .news-item {
border-left: 3px solid var(--accent-color); 
            padding-left: 18px; 
            position: relative;
}

body.page-index .news-date {
font-size: 12px; 
            font-weight: 800; 
            color: var(--accent-color); 
            text-transform: uppercase; 
            letter-spacing: 0.5px;
            margin-bottom: 6px;
}

body.page-index .news-item-title {
font-size: 16px; 
            font-weight: 700;
            margin: 0 0 8px 0; 
            color: var(--text-color);
}

body.page-index .news-item-body {
font-size: 14px;
            color: var(--text-muted); 
            margin: 0; 
            line-height: 1.6;
}

body.page-index .dashboard-grid {
display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
            gap: 24px; 
            margin-bottom: 60px;
}

body.page-index .dash-card {
background: var(--card-bg);
            border: 1px solid var(--border-color); 
            border-radius: var(--radius); 
            padding: 28px; 
            display: flex; 
            flex-direction: column; 
            gap: 16px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
            transition: var(--transition);
            text-decoration: none; 
            color: inherit; 
            position: relative;
}

body.page-index .dash-card:hover {
transform: translateY(-4px); 
            box-shadow: 0 12px 25px rgba(0,0,0,0.06);
            border-color: #cbd5e1;
}

html[data-theme="dark"] body.page-index .dash-card:hover {
border-color: var(--text-muted);
}

body.page-index .dash-card-header {
display: flex; 
            align-items: center; 
            gap: 16px;
}

body.page-index .dash-icon {
width: 48px; 
            height: 48px; 
            border-radius: 12px; 
            background: var(--input-bg); 
            display: flex;
            justify-content: center; 
            align-items: center; 
            font-size: 24px; 
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
}

body.page-index .dash-card-title,
body.page-index .dash-title {
margin: 0; 
            font-size: 18px; 
            font-weight: 800; 
            color: var(--text-color);
}

body.page-index .dash-desc {
margin: 0; 
            font-size: 14px; 
            color: var(--text-muted); 
            line-height: 1.6;
}

body.page-index .dash-action {
font-size: 14px; 
            font-weight: 700; 
            color: var(--accent-color); 
            margin-top: auto; 
            display: flex;
            align-items: center; 
            gap: 6px; 
            transition: var(--transition);
}

body.page-index .dash-card:hover .dash-action {
gap: 10px;
}

@media (max-width: 768px) {
body.page-index .hero-section {
padding: 24px 18px;
                margin-bottom: 22px;
                border-radius: 18px;
}

body.page-index .hero-section h2 {
font-size: 24px;
                line-height: 1.25;
                margin-bottom: 12px;
}

body.page-index .hero-section p {
font-size: 15px;
                line-height: 1.45;
}

body.page-index .news-section {
padding: 20px 16px;
                margin-bottom: 24px;
                border-radius: 18px;
}

body.page-index .news-section-title {
font-size: 22px;
                margin-bottom: 16px;
                padding-bottom: 12px;
}

body.page-index .news-timeline {
gap: 18px;
}

body.page-index .news-item {
padding-left: 14px;
}

body.page-index .news-date {
font-size: 11px;
                margin-bottom: 4px;
}

body.page-index .news-item-title {
font-size: 17px;
                margin-bottom: 6px;
}

body.page-index .news-item-body {
font-size: 14px;
                line-height: 1.45;
}

body.page-index .dashboard-grid {
grid-template-columns: 1fr;
                gap: 14px;
                margin-bottom: 30px;
}

body.page-index .dash-card {
padding: 18px 16px;
                gap: 10px;
                border-radius: 18px;
}

body.page-index .dash-icon {
width: 40px;
                height: 40px;
                font-size: 20px;
                border-radius: 10px;
}

body.page-index .dash-title,
body.page-index .dash-card-title {
font-size: 17px;
}

body.page-index .dash-desc {
font-size: 14px;
                line-height: 1.4;
}

body.page-index .dash-action {
font-size: 14px;
}
}


/* ==========================================================================
   Extracted scoped CSS from ipsc-hub.html
   ========================================================================== */
/* ==========================================================================
           HUB-SPEZIFISCHES LAYOUT (Nutzt nun global.css Variablen)
           ========================================================================== */

body.page-ipsc-hub .hub-header-area {
text-align: center; margin-bottom: 48px;
}

body.page-ipsc-hub .hub-header-area h2 {
font-size: clamp(24px, 5vw, 32px); font-weight: 800; margin-bottom: 12px; color: var(--text-color); letter-spacing: -0.5px;
}

body.page-ipsc-hub .hub-header-area p {
color: var(--text-muted); font-size: 15px; max-width: 650px; margin: 0 auto; line-height: 1.6;
}

body.page-ipsc-hub .hub-category-title {
margin-top: 40px; 
            margin-bottom: 24px; 
            font-size: 20px; 
            color: var(--text-color); 
            border-bottom: 2px solid var(--bg-color); 
            padding-bottom: 12px; 
            font-weight: 800;
}

body.page-ipsc-hub .hub-grid {
display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
            gap: 24px;
}

body.page-ipsc-hub .hub-card {
background: var(--card-bg); 
            border: 1px solid var(--border-color); 
            border-radius: var(--radius-lg); 
            padding: 24px; 
            display: flex; 
            flex-direction: column; 
            gap: 16px; 
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); 
            transition: var(--transition); 
            text-decoration: none; 
            color: inherit; 
            position: relative; 
            overflow: hidden;
}

body.page-ipsc-hub .hub-card:hover {
transform: translateY(-4px); 
            box-shadow: var(--shadow-md); 
            border-color: #cbd5e1;
}

html[data-theme="dark"] body.page-ipsc-hub .hub-card:hover {
border-color: var(--text-muted);
}

body.page-ipsc-hub .hub-card::after {
content: ""; 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            height: 4px; 
            background: var(--accent-gradient); 
            transform: scaleX(0); 
            transform-origin: left; 
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-ipsc-hub .hub-card:hover::after {
transform: scaleX(1);
}

body.page-ipsc-hub .hub-card-header {
display: flex; align-items: center; gap: 16px;
}

body.page-ipsc-hub .hub-icon {
width: 52px; 
            height: 52px; 
            border-radius: 12px; 
            background: var(--input-bg); 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            font-size: 24px; 
            border: 1px solid var(--border-color); 
            flex-shrink: 0; 
            box-shadow: var(--shadow-sm);
}

body.page-ipsc-hub .hub-icon img {
width: 100%; height: 100%; object-fit: contain; border-radius: 8px;
}

body.page-ipsc-hub .hub-title {
margin: 0; font-size: 18px; font-weight: 800; color: var(--text-color);
}

body.page-ipsc-hub .hub-desc {
margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; flex-grow: 1;
}

body.page-ipsc-hub .hub-btn {
background: var(--bg-color); 
            color: var(--text-color); 
            border: 2px solid var(--border-color); 
            padding: 10px 16px; 
            border-radius: var(--radius); 
            text-align: center; 
            font-weight: 700; 
            font-size: 13px; 
            transition: var(--transition); 
            margin-top: auto;
}

body.page-ipsc-hub .hub-card:hover .hub-btn {
background: var(--accent-color); 
            color: #fff; 
            border-color: var(--accent-color);
            box-shadow: 0 4px 14px rgba(255, 159, 67, 0.3);
            transform: translateY(-2px);
}

@media (max-width: 768px) {
body.page-ipsc-hub .hub-grid {
grid-template-columns: 1fr; gap: 16px;
}

body.page-ipsc-hub .hub-category-title {
font-size: 18px; margin-top: 30px;
}
}


/* ==========================================================================
   Extracted scoped CSS from marktplatz.html
   ========================================================================== */
/* =========================================================================
           MARKTPLATZ-SPEZIFISCHES LAYOUT (Nutzt nun global.css Variablen)
           ========================================================================== */

body.page-marktplatz .info-box {
background-color: rgba(255, 159, 67, 0.08);
            border-left: 4px solid var(--accent-color);
            color: var(--text-color); 
            padding: 16px; 
            margin-bottom: 30px; 
            border-radius: var(--radius);
            font-size: 14px; 
            line-height: 1.5; 
            border: 1px solid var(--border-color); 
            border-left-width: 4px;
}

body.page-marktplatz .form-section {
background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg); 
            padding: 32px; 
            margin-bottom: 40px; 
            box-shadow: var(--shadow-sm);
}

body.page-marktplatz .form-section h2 {
margin-top: 0; 
            font-size: 20px; 
            font-weight: 800; 
            color: var(--text-color); 
            border-bottom: 2px solid var(--bg-color); 
            padding-bottom: 16px; 
            margin-bottom: 24px;
}

body.page-marktplatz .toggle-selector {
display: flex;
            gap: 20px; 
            margin-bottom: 24px; 
            background: var(--input-bg); 
            padding: 16px; 
            border-radius: var(--radius); 
            border: 1px solid var(--border-color);
}

body.page-marktplatz .toggle-selector label {
display: flex;
            align-items: center; 
            gap: 8px; 
            color: var(--text-color); 
            cursor: pointer; 
            margin: 0; 
            font-size: 14px;
            font-weight: 600;
}

body.page-marktplatz .toggle-selector input {
accent-color: var(--accent-color); 
            cursor: pointer; 
            width: 18px; 
            height: 18px;
}

body.page-marktplatz .filter-bar {
background-color: var(--card-bg);
            border: 1px solid var(--border-color); 
            padding: 16px 20px; 
            border-radius: var(--radius-lg);
            margin-bottom: 24px; 
            display: flex; 
            gap: 15px; 
            flex-wrap: wrap; 
            align-items: center; 
            box-shadow: var(--shadow-sm);
}

body.page-marktplatz .filter-bar.group {
display: flex; align-items: center; gap: 10px;
}

body.page-marktplatz .filter-group label {
margin: 0; color: var(--text-color); white-space: nowrap; font-size: 14px; font-weight: 700;
}

/* Select-Felder passend zu den neuen Inputs */

body.page-marktplatz select {
padding: 14px 16px; 
            border-radius: var(--radius); 
            background-color: var(--input-bg); 
            color: var(--text-color); 
            border: 2px solid var(--border-color); 
            font-family: inherit; 
            font-size: 15px; 
            transition: var(--transition);
}

body.page-marktplatz select:focus {
border-color: var(--accent-color); outline: none;
}

body.page-marktplatz .filter-group select {
padding: 10px 14px; font-size: 14px;
}

body.page-marktplatz .form-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}

/* --- MATCH KARTEN --- */

body.page-marktplatz .match-list {
display: flex; flex-direction: column; gap: 20px;
}

body.page-marktplatz .match-card {
background-color: var(--card-bg);
            border-radius: var(--radius-lg); 
            padding: 24px;
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border: 1px solid var(--border-color);
            position: relative; 
            overflow: hidden; 
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
            transition: var(--transition);
}

body.page-marktplatz .match-card:hover {
transform: translateY(-2px); 
            box-shadow: var(--shadow-md); 
            border-color: #cbd5e1;
}

html[data-theme="dark"] body.page-marktplatz .match-card:hover {
border-color: var(--text-muted);
}

body.page-marktplatz .match-card::before {
content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 6px;
}

body.page-marktplatz .card-offer::before {
background-color: var(--accent-color);
}

body.page-marktplatz .card-want::before {
background-color: var(--success-color);
}

body.page-marktplatz .card-offer {
background-color: rgba(255, 159, 67, 0.02);
}

body.page-marktplatz .card-want {
background-color: rgba(16, 185, 129, 0.02);
}

body.page-marktplatz .match-details h3 {
margin: 0 0 8px 0; color: var(--text-color); font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px;
}

body.page-marktplatz .match-details p {
margin: 6px 0; font-size: 14px; color: var(--text-muted); line-height: 1.5;
}

body.page-marktplatz .badge-container {
display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}

body.page-marktplatz .badge {
background-color: var(--input-bg); border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-color); box-shadow: var(--shadow-sm);
}

body.page-marktplatz .card-actions {
display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

body.page-marktplatz .btn-contact {
background: var(--accent-gradient);
            color: #fff; border: none;
            padding: 12px 24px; font-weight: 700; border-radius: var(--radius); text-decoration: none; text-align: center; cursor: pointer; font-size: 14px;
            box-shadow: 0 4px 14px 0 rgba(255, 159, 67, 0.3); transition: var(--transition);
}

body.page-marktplatz .btn-contact-want {
background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%); box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.3);
}

body.page-marktplatz .btn-contact:hover {
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 159, 67, 0.4);
}

body.page-marktplatz .btn-contact-want:hover {
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

body.page-marktplatz .btn-delete {
background-color: transparent;
            color: var(--danger-color); border: 2px solid rgba(239, 68, 68, 0.3);
            padding: 8px 16px; font-size: 13px; font-weight: 700; border-radius: var(--radius); cursor: pointer; transition: var(--transition);
}

body.page-marktplatz .btn-delete:hover {
background-color: var(--danger-color); color: #fff; border-color: var(--danger-color);
}

body.page-marktplatz .btn-edit {
background-color: transparent;
            color: var(--info-color); border: 2px solid rgba(59, 130, 246, 0.3);
            padding: 8px 16px; font-size: 13px; font-weight: 700; border-radius: var(--radius); cursor: pointer; transition: var(--transition);
}

body.page-marktplatz .btn-edit:hover {
background-color: var(--info-color); color: #fff; border-color: var(--info-color);
}

body.page-marktplatz .btn-export {
background: var(--bg-color);
            color: var(--text-color); border: 2px solid var(--border-color); padding: 8px 16px; cursor: pointer; border-radius: var(--radius); font-size: 12px; font-weight: 700; transition: var(--transition);
}

body.page-marktplatz .btn-export:hover {
border-color: #cbd5e1; background: var(--card-bg); transform: translateY(-1px);
}

body.page-marktplatz .btn-report {
background: rgba(239, 68, 68, 0.05);
            color: var(--danger-color); border: 1px solid rgba(239, 68, 68, 0.2); padding: 6px 12px; cursor: pointer; border-radius: var(--radius); font-size: 11px; font-weight: 700; transition: var(--transition);
}

body.page-marktplatz .btn-report:hover {
background-color: var(--danger-color); color: #fff;
}

/* --- PROFILBILDER & BEWERTUNGEN --- */

body.page-marktplatz .match-header-flex {
display: flex; align-items: center; gap: 16px;
}

body.page-marktplatz .card-avatar {
width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            background-color: var(--input-bg);
            transition: var(--transition);
}

body.page-marktplatz .card-avatar:hover {
border-color: var(--accent-color); transform: scale(1.05);
}

body.page-marktplatz .avatar-placeholder-flex {
width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-gradient);
            color: #ffffff;
            font-weight: 800;
            font-size: 18px;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition: var(--transition);
}

body.page-marktplatz .avatar-placeholder-flex:hover {
transform: scale(1.05);
}

body.page-marktplatz .btn-mediated {
background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
            color: #ffffff;
            border: none;
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 700;
            border-radius: var(--radius);
            cursor: pointer;
            margin-top: 5px;
            transition: var(--transition);
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

body.page-marktplatz .btn-mediated:hover {
transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3);
}

body.page-marktplatz .rating-badge {
background-color: rgba(16, 185, 129, 0.1);
            color: var(--success-color);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 800;
            margin-left: 8px;
            border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Stern-Auswahl CSS */

body.page-marktplatz .star-rating-select {
display: inline-flex; flex-direction: row-reverse; gap: 6px;
}

body.page-marktplatz .star-rating-select input {
display: none;
}

body.page-marktplatz .star-rating-select label {
font-size: 32px;
            color: var(--border-color);
            cursor: pointer;
            transition: color 0.2s;
            margin: 0;
}

body.page-marktplatz .star-rating-select input:checked ~ label,
body.page-marktplatz .star-rating-select label:hover,
body.page-marktplatz .star-rating-select label:hover ~ label {
color: #ffca28;
            text-shadow: 0 0 10px rgba(255, 202, 40, 0.3);
}

body.page-marktplatz .toast-container {
position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}

body.page-marktplatz .action-buttons-group {
display: flex; gap: 10px; margin-top: 8px;
}

@media (max-width: 768px) {
body.page-marktplatz .form-section {
padding: 18px 16px !important;
        margin-bottom: 22px !important;
        border-radius: 18px !important;
}

body.page-marktplatz .form-section h2 {
font-size: 22px !important;
        padding-bottom: 12px !important;
        margin-bottom: 18px !important;
}

body.page-marktplatz .info-box {
padding: 14px 12px !important;
        margin-bottom: 20px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        border-radius: 14px !important;
}

body.page-marktplatz .toggle-selector {
flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
        padding: 12px !important;
        margin-bottom: 18px !important;
        border-radius: 14px !important;
}

body.page-marktplatz .toggle-selector label {
font-size: 13px !important;
}

body.page-marktplatz .toggle-selector input {
width: 16px !important;
        height: 16px !important;
}

body.page-marktplatz .form-grid {
grid-template-columns: 1fr !important;
        gap: 12px !important;
}

body.page-marktplatz .filter-bar {
padding: 14px 12px !important;
        margin-bottom: 20px !important;
        border-radius: 16px !important;
}

body.page-marktplatz .filter-group {
width: 100% !important;
}

body.page-marktplatz .filter-group select {
width: 100% !important;
        height: 40px !important;
        padding: 7px 12px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
}

body.page-marktplatz .match-list {
gap: 14px !important;
}

body.page-marktplatz .match-card {
flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
}

body.page-marktplatz .match-details h3 {
font-size: 16px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
}

body.page-marktplatz .match-details p {
font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 4px 0 !important;
}

body.page-marktplatz .badge-container {
gap: 6px !important;
        margin-top: 8px !important;
}

body.page-marktplatz .badge {
padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
}

body.page-marktplatz .card-avatar,
body.page-marktplatz .avatar-placeholder-flex {
width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 16px !important;
}

body.page-marktplatz .match-header-flex {
gap: 12px !important;
}

body.page-marktplatz .card-actions {
align-items: stretch !important;
        width: 100% !important;
        border-top: 1px solid var(--border-color) !important;
        padding-top: 12px !important;
        gap: 8px !important;
}

body.page-marktplatz .action-buttons-group {
width: 100% !important;
        display: flex !important;
        gap: 8px !important;
}

body.page-marktplatz .action-buttons-group button,
body.page-marktplatz .btn-contact,
body.page-marktplatz .btn-delete,
body.page-marktplatz .btn-edit,
body.page-marktplatz .btn-export,
body.page-marktplatz .btn-mediated {
flex: 1 !important;
        text-align: center !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
}

body.page-marktplatz #btn-cancel-edit {
padding: 9px 14px !important;
        font-size: 14px !important;
}

body.page-marktplatz #btn-submit-ad {
min-height: 40px !important;
        padding: 9px 14px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
}

body.page-marktplatz h2[data-txt="list-title"] {
font-size: 22px !important;
        margin-bottom: 16px !important;
}
}


/* ==========================================================================
   Extracted scoped CSS from mein-planer.html
   ========================================================================== */
/* ==========================================================================
           PLANER-SPEZIFISCHES LAYOUT
           ========================================================================== */

body.page-mein-planer #logged-out-section,
body.page-mein-planer #planner-section {
background-color: var(--card-bg); 
            padding: 32px; 
            border-radius: var(--radius-lg); 
            border: 1px solid var(--border-color); 
            margin-bottom: 30px; 
            box-shadow: var(--shadow-sm);
}

body.page-mein-planer .form-section h2,
body.page-mein-planer #planner-section h2 {
margin-top: 0; 
            font-size: 22px; 
            font-weight: 800; 
            color: var(--text-color); 
            letter-spacing: -0.5px;
}

body.page-mein-planer #planner-section h3 {
font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
            color: var(--text-color);
}

body.page-mein-planer .planner-form-row {
display: flex; gap: 20px;
}

body.page-mein-planer .match-item {
background-color: var(--card-bg); 
            border-left: 4px solid var(--accent-color); 
            padding: 20px; 
            margin-bottom: 16px; 
            border-radius: var(--radius); 
            border-top: 1px solid var(--border-color); 
            border-right: 1px solid var(--border-color); 
            border-bottom: 1px solid var(--border-color); 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
            transition: var(--transition);
}

body.page-mein-planer .match-item:hover {
transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            border-color: var(--border-color);
}

body.page-mein-planer .match-item h4 {
margin: 0 0 8px 0; 
            color: var(--text-color); 
            font-size: 16px; 
            font-weight: 800; 
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
}

body.page-mein-planer .match-item h4 a {
color: var(--info-color); text-decoration: none;
}

body.page-mein-planer .match-item h4 a:hover {
text-decoration: underline;
}

body.page-mein-planer .match-item p {
margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.5;
}

/* Moderne Badges für Status, Squad und Auto-Import */

body.page-mein-planer .badge {
display: inline-block; 
            padding: 4px 10px; 
            font-size: 11px; 
            font-weight: 800; 
            border-radius: 6px; 
            margin-left: 4px; 
            text-transform: uppercase; 
            border: 1px solid transparent;
}

body.page-mein-planer .badge-approved {
background-color: rgba(16, 185, 129, 0.1); color: var(--success-color); border-color: rgba(16, 185, 129, 0.2);
}

body.page-mein-planer .badge-pending {
background-color: rgba(59, 130, 246, 0.1); color: var(--info-color); border-color: rgba(59, 130, 246, 0.2);
}

body.page-mein-planer .badge-warteliste {
background-color: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.2);
}

body.page-mein-planer .badge-bot {
background-color: rgba(99, 102, 241, 0.1); color: #6366f1; text-transform: none; border-color: rgba(99, 102, 241, 0.2);
}

body.page-mein-planer .badge-squad {
background-color: var(--input-bg); color: var(--text-color); border-color: var(--border-color);
}

body.page-mein-planer .delete-btn {
background-color: transparent; 
            color: var(--danger-color); 
            border: 2px solid rgba(239, 68, 68, 0.3); 
            width: auto; 
            padding: 8px 16px; 
            font-size: 13px; 
            font-weight: 700; 
            border-radius: var(--radius); 
            transition: var(--transition);
            cursor: pointer;
}

body.page-mein-planer .delete-btn:hover {
background-color: var(--danger-color); color: #fff; border-color: var(--danger-color);
}

body.page-mein-planer .btn-success {
background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%); 
            box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.3); 
            color: #fff;
            border: none;
            padding: 14px 24px;
            font-weight: 700;
            border-radius: var(--radius);
            cursor: pointer;
            width: 100%;
            transition: var(--transition);
}

body.page-mein-planer .btn-success:hover {
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

@media (max-width: 768px) {
body.page-mein-planer #logged-out-section,
body.page-mein-planer #planner-section {
padding: 20px;
}

body.page-mein-planer .planner-form-row {
flex-direction: column; gap: 0;
}

body.page-mein-planer .match-item {
flex-direction: column; align-items: stretch; gap: 16px;
}

body.page-mein-planer .match-item div[style*="display: flex"] {
width: 100%; justify-content: stretch; flex-direction: column; gap: 8px !important;
}

body.page-mein-planer .match-item div[style*="display: flex"] button {
width: 100%; text-align: center;
}
}


/* ==========================================================================
   Extracted scoped CSS from performance.html
   ========================================================================== */
/* ==========================================================================
           PERFORMANCE-CHECK - SPEZIFISCHES LAYOUT (Nutzt global.css Variablen)
           ========================================================================== */

body.page-performance .container {
max-width: 1000px; margin: 40px auto; padding: 0 24px;
}

body.page-performance .info-box {
background-color: rgba(59, 130, 246, 0.08); 
            border-left: 4px solid var(--info-color); 
            color: var(--text-color); 
            padding: 16px; 
            margin-bottom: 30px; 
            border-radius: var(--radius); 
            font-size: 14px; 
            border: 1px solid var(--border-color); 
            border-left-width: 4px;
}

body.page-performance .danger-box {
background-color: rgba(239, 68, 68, 0.06); 
            border: 2px dashed rgba(239, 68, 68, 0.2);
            color: var(--danger-color); 
            padding: 24px; 
            margin-bottom: 30px; 
            border-radius: var(--radius-lg); 
            font-size: 15px; 
            font-weight: 700; 
            text-align: center;
}

/* 📤 UPLOAD ZONE */

body.page-performance .upload-zone {
border: 2px dashed var(--accent-color); 
            background-color: rgba(255, 159, 67, 0.03); 
            padding: 48px 24px; 
            text-align: center; 
            border-radius: var(--radius-lg); 
            cursor: pointer; 
            transition: var(--transition); 
            margin-bottom: 32px;
}

body.page-performance .upload-zone:hover {
background-color: rgba(255, 159, 67, 0.08); border-color: #ff8008;
}

body.page-performance .upload-icon {
font-size: 48px; margin-bottom: 16px; line-height: 1;
}

body.page-performance .upload-title {
font-size: 18px; font-weight: 800; color: var(--text-color); margin: 0 0 8px 0; letter-spacing: -0.5px;
}

body.page-performance .upload-desc {
font-size: 14px; color: var(--text-muted); margin: 0; font-weight: 600;
}

body.page-performance #file-input {
display: none;
}

/* 🔗 LINK IMPORT */

body.page-performance .link-import-bar {
display: flex; gap: 16px; margin: 0 0 32px 0; align-items: stretch;
}

body.page-performance .url-input {
flex: 1; 
            min-width: 0; 
            background: var(--input-bg); 
            border: 2px solid var(--border-color); 
            color: var(--text-color); 
            padding: 14px 16px; 
            border-radius: var(--radius); 
            font-size: 15px; 
            outline: none; 
            box-shadow: var(--shadow-sm); 
            transition: var(--transition);
}

body.page-performance .url-input:focus {
border-color: var(--info-color);
}

body.page-performance .primary-btn {
border: 0; 
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); 
            color: #fff; 
            border-radius: var(--radius); 
            padding: 0 28px; 
            font-size: 15px; 
            font-weight: 700; 
            cursor: pointer; 
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3); 
            min-width: 170px; 
            transition: var(--transition);
}

body.page-performance .primary-btn:hover {
transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

body.page-performance .primary-btn:disabled {
opacity: 0.65; cursor: wait;
}

/* 📊 ANALYSIS RESULTS */

body.page-performance #analysis-results {
display: none;
}

body.page-performance .elo-stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}

body.page-performance .elo-stat-card {
background: var(--card-bg); border: 1px solid var(--border-color); padding: 20px; border-radius: var(--radius-lg); text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

body.page-performance .elo-stat-val {
font-size: 26px; font-weight: 900; color: var(--accent-color); margin-bottom: 6px; letter-spacing: -0.5px;
}

body.page-performance .elo-stat-lbl {
font-size: 12px; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ℹ️ AUSKLAPPBARE LEGENDE */

body.page-performance .legend-box {
background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 32px; box-shadow: var(--shadow-sm); font-size: 14px;
}

body.page-performance .legend-title {
font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); line-height: 1.35;
}

body.page-performance .legend-content {
display: none; margin-top: 16px; border-top: 1px dashed var(--border-color); padding-top: 16px;
}

body.page-performance .legend-table {
width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px;
}

body.page-performance .legend-table th,
body.page-performance .legend-table td {
text-align: left; padding: 10px 12px; font-size: 13px;
}

body.page-performance .legend-table th {
color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; font-weight: 800; background-color: var(--bg-color);
}

body.page-performance .legend-table th:first-child {
border-top-left-radius: 6px;
}

body.page-performance .legend-table th:last-child {
border-top-right-radius: 6px;
}

body.page-performance .legend-table tr:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}

/* 🔍 INTERAKTIVE FILTER-BAR */

body.page-performance .filter-bar {
background: var(--card-bg); border: 1px solid var(--border-color); padding: 16px; border-radius: var(--radius-lg); margin-bottom: 24px; display: flex; gap: 14px; flex-wrap: wrap; box-shadow: var(--shadow-sm);
}

body.page-performance .filter-input {
flex: 2; 
            min-width: 200px; 
            background: var(--input-bg); 
            border: 2px solid var(--border-color); 
            color: var(--text-color); 
            padding: 10px 14px; 
            border-radius: var(--radius); 
            font-size: 14px; 
            outline: none; 
            font-family: inherit;
            transition: var(--transition);
}

body.page-performance .filter-input:focus {
border-color: var(--accent-color);
}

body.page-performance .filter-select {
flex: 1; 
            min-width: 140px; 
            background: var(--input-bg); 
            border: 2px solid var(--border-color); 
            color: var(--text-color); 
            padding: 10px 14px; 
            border-radius: var(--radius); 
            font-size: 14px; 
            outline: none; 
            cursor: pointer; 
            font-family: inherit;
            font-weight: 600;
            transition: var(--transition);
}

body.page-performance .filter-select:focus {
border-color: var(--accent-color);
}

/* 👥 REIHEN-LAYOUT MIT FLAGGEN */

body.page-performance .competitor-list {
display: flex; flex-direction: column; gap: 12px;
}

body.page-performance .competitor-row {
background: var(--card-bg); border: 1px solid var(--border-color); padding: 16px 24px; border-radius: var(--radius-lg); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.02); transition: var(--transition);
}

body.page-performance .competitor-row:hover {
transform: translateX(4px); border-color: #cbd5e1;
}

body.page-performance .competitor-info {
display: flex; flex-direction: column; gap: 6px;
}

body.page-performance .competitor-name {
font-size: 16px; font-weight: 700; color: var(--text-color);
}

body.page-performance .competitor-meta {
font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; font-weight: 600;
}

body.page-performance .fi {
border-radius: 4px; box-shadow: 0 0 2px rgba(0,0,0,0.15);
}

body.page-performance .competitor-row .competitor-elo {
display: flex; align-items: center; gap: 14px;
}

body.page-performance .elo-score {
font-size: 18px; font-weight: 800; color: var(--text-color); font-variant-numeric: tabular-nums;
}

body.page-performance .elo-badge {
padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 800; min-width: 45px; text-align: center; box-shadow: var(--shadow-sm);
}

body.page-performance .badge-gm {
background: rgba(239, 68, 68, 0.1); color: var(--danger-color);
}

body.page-performance .badge-m {
background: rgba(255, 159, 67, 0.1); color: var(--accent-color);
}

body.page-performance .badge-a {
background: rgba(16, 185, 129, 0.1); color: var(--success-color);
}

body.page-performance .badge-u {
background: rgba(100, 116, 139, 0.1); color: var(--text-muted);
}

/* 📂 MATCH-ARCHIV */

body.page-performance .match-archive {
background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: 32px; box-shadow: var(--shadow-sm); overflow: hidden;
}

body.page-performance .archive-header {
padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: var(--text-color); border-bottom: 1px solid var(--border-color); letter-spacing: -0.5px;
}

body.page-performance .archive-content {
display: none; padding: 16px; background-color: var(--input-bg);
}

body.page-performance .archive-empty {
color: var(--text-muted); font-size: 14px; padding: 12px 4px; font-style: italic; font-weight: 600;
}

body.page-performance .archive-item {
border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: 14px; background: var(--card-bg); overflow: hidden; box-shadow: var(--shadow-sm);
}

body.page-performance .archive-meta {
flex: 1; min-width: 0;
}

body.page-performance .archive-title {
font-weight: 800; font-size: 15px; color: var(--text-color); white-space: normal; word-break: break-word; line-height: 1.3;
}

body.page-performance .archive-sub {
font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; font-weight: 600;
}

body.page-performance .archive-btn {
border: 2px solid var(--border-color); 
            background: var(--card-bg); 
            color: var(--text-color); 
            border-radius: var(--radius); 
            padding: 10px 14px; 
            font-size: 13px; 
            cursor: pointer; 
            font-weight: 700; 
            text-align: center; 
            transition: var(--transition);
}

body.page-performance .archive-btn:hover {
background-color: var(--bg-color); border-color: #cbd5e1; transform: translateY(-1px);
}

body.page-performance .archive-btn.delete {
color: var(--danger-color); border-color: rgba(239, 68, 68, 0.2);
}

body.page-performance .archive-btn.delete:hover {
background-color: rgba(239, 68, 68, 0.05); border-color: var(--danger-color);
}

body.page-performance .archive-details {
display: none; padding: 4px 16px 16px 16px; border-top: 1px dashed var(--border-color); background-color: var(--input-bg);
}

body.page-performance .archive-small-list {
display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
}

body.page-performance .archive-small-row {
display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sm);
}

body.page-performance .archive-small-row span:first-child {
font-weight: 700; color: var(--text-color);
}

body.page-performance .archive-small-row span:last-child {
color: var(--accent-color); font-weight: 800; font-variant-numeric: tabular-nums;
}

/* LOADING SPINNER */

body.page-performance .loader-container {
display: none; text-align: center; padding: 48px 24px;
}

body.page-performance .spinner {
border: 4px solid var(--border-color); border-left-color: var(--accent-color); border-radius: 50%; width: 44px; height: 44px; animation: spin 1s linear infinite; margin: 0 auto 20px auto;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Saubere Darstellung: keine Encoding-Abhaengigkeit + bessere Karten */

body.page-performance #quick-analyze-section {
background: rgba(59, 130, 246, 0.06) !important;
            border: 1px solid rgba(59, 130, 246, 0.3) !important;
            border-radius: var(--radius-lg) !important;
            padding: 20px !important;
            margin-bottom: 24px !important;
            box-shadow: var(--shadow-sm);
}

body.page-performance #quick-analyze-section h4 {
display: flex;
            align-items: center;
            gap: 8px;
            line-height: 1.35;
            font-weight: 800;
            letter-spacing: -0.5px;
}

body.page-performance #quick-analyze-buttons .archive-btn {
min-height: 44px;
            border-radius: var(--radius) !important;
            line-height: 1.35;
            white-space: normal;
            word-break: break-word;
            border: 2px solid rgba(59, 130, 246, 0.3) !important;
            transition: var(--transition);
}

body.page-performance #quick-analyze-buttons .archive-btn:hover {
background-color: var(--card-bg) !important;
            border-color: var(--info-color) !important;
            transform: translateY(-1px);
}

@media (max-width: 650px) {
body.page-performance {
padding-top: env(safe-area-inset-top);
}

body.page-performance .container {
margin: 20px auto; padding: 0 16px; box-sizing: border-box;
}

body.page-performance #quick-analyze-section {
padding: 16px !important;
}

body.page-performance .upload-zone {
padding: 40px 16px; margin-bottom: 24px;
}

body.page-performance .archive-header {
padding: 16px;
}

body.page-performance .archive-item {
padding: 0;
}

body.page-performance .archive-small-row {
flex-direction: column; gap: 4px;
}

body.page-performance .elo-stats-grid {
grid-template-columns: 1fr; gap: 12px;
}

body.page-performance .filter-bar {
flex-direction: column; gap: 12px;
}

body.page-performance .link-import-bar {
flex-direction: column; gap: 12px; margin-bottom: 24px;
}

body.page-performance .primary-btn {
min-width: 0; padding: 14px 18px; width: 100%;
}

body.page-performance .competitor-row {
flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px;
}

body.page-performance .competitor-elo {
width: 100%; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 4px;
}
}


/* ==========================================================================
   Extracted scoped CSS from schiessbuch.html
   ========================================================================== */
body.page-schiessbuch .page-section {
background: var(--card-bg); padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); margin-bottom: 30px; box-shadow: var(--shadow-sm);
}

body.page-schiessbuch .page-section h2 {
margin-top: 0; font-size: 22px; font-weight: 800; border-bottom: 2px solid var(--bg-color); padding-bottom: 12px; margin-bottom: 20px;
}

/* 12/18 Dashboard */

body.page-schiessbuch .dash-1218 {
display: flex; align-items: center; gap: 20px; background: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.2); padding: 20px; border-radius: var(--radius-lg); margin-bottom: 24px;
}

body.page-schiessbuch .dash-circle {
width: 80px; height: 80px; border-radius: 50%; background: var(--card-bg); border: 4px solid var(--info-color); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); flex-shrink: 0;
}

body.page-schiessbuch .dash-circle span.big {
font-size: 24px; font-weight: 900; color: var(--text-color); line-height: 1;
}

body.page-schiessbuch .dash-circle span.small {
font-size: 10px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; margin-top: 2px;
}

body.page-schiessbuch .dash-text h3 {
margin: 0 0 4px 0; color: var(--text-color); font-size: 16px;
}

body.page-schiessbuch .dash-text p {
margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.4;
}

/* Listen-Design */

body.page-schiessbuch .log-entry {
background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; transition: var(--transition);
}

body.page-schiessbuch .log-header {
display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;
}

body.page-schiessbuch .log-date {
font-weight: 800; color: var(--text-color); font-size: 15px;
}

body.page-schiessbuch .log-badge-verified {
background: rgba(16, 185, 129, 0.1); color: var(--success-color); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px;
}

body.page-schiessbuch .log-badge-pending {
background: rgba(255, 159, 67, 0.1); color: var(--accent-color); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 800;
}

body.page-schiessbuch .log-details {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px;
}

body.page-schiessbuch .log-details span {
color: var(--text-muted);
}

body.page-schiessbuch .log-details strong {
color: var(--text-color);
}

body.page-schiessbuch .btn-sign {
background: var(--accent-gradient); color: #fff; border: none; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; width: 100%; margin-top: 8px; box-shadow: 0 2px 8px rgba(255,159,67,0.3);
}

body.page-schiessbuch .locked-info {
font-size: 11px; color: var(--success-color); text-align: center; margin-top: 8px; font-style: italic; font-weight: 600;
}

/* Unterschriften-Feld (WICHTIG FÜR MOBILE) */

body.page-schiessbuch #signature-pad {
border: 2px dashed var(--border-color); background: var(--bg-color); border-radius: var(--radius); width: 100%; height: 200px; touch-action: none; cursor: crosshair;
}

@media (max-width: 768px) {
body.page-schiessbuch .page-section {
padding: 20px 16px; border-radius: 20px;
}
}


/* ==========================================================================
   Extracted scoped CSS from sg-timer-live.html
   ========================================================================== */
body.page-sg-timer-live .main-container {
max-width: 1100px;
            margin: 30px auto;
            padding: 0 20px;
}

/* 🌟 MODERNES TAB-SYSTEM */

body.page-sg-timer-live .tab-navigation {
display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 30px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 15px;
}

body.page-sg-timer-live .tab-btn {
background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            padding: 10px 20px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
}

body.page-sg-timer-live .tab-btn.active {
background: var(--accent-color);
            color: #fff;
            border-color: var(--accent-color);
            box-shadow: var(--shadow-sm);
}

body.page-sg-timer-live .tab-content {
display: none;
}

body.page-sg-timer-live .tab-content.active {
display: block;
}

/* Raster-Layouts */

body.page-sg-timer-live .grid-layout {
display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 24px;
}

@media (max-width: 900px) {
body.page-sg-timer-live .grid-layout {
grid-template-columns: 1fr;
}
}

body.page-sg-timer-live .panel-card {
background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 22px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
}

body.page-sg-timer-live .panel-card h2,
body.page-sg-timer-live .panel-card h3 {
margin-top: 0; letter-spacing: 0.5px;
}

body.page-sg-timer-live .status-badge {
display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            background: rgba(255,255,255,0.05);
            margin-bottom: 15px;
}

/* Formulare & Select-Boxen repariert für Light-Mode */

body.page-sg-timer-live .form-group {
margin-bottom: 14px; text-align: left;
}

body.page-sg-timer-live .form-group label {
display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase;
}

body.page-sg-timer-live .form-group input,
body.page-sg-timer-live .form-group select {
width: 100%; 
            padding: 10px; 
            box-sizing: border-box; 
            background: var(--card-bg); 
            border: 1px solid var(--border-color); 
            border-radius: 8px; 
            color: var(--text-color); 
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
}

body.page-sg-timer-live .btn-tactic {
width: 100%; padding: 12px; border-radius: 8px; font-weight: bold; font-size: 14px; cursor: pointer; border: none; transition: all 0.1s;
}

body.page-sg-timer-live .btn-tactic:active {
transform: scale(0.98);
}

body.page-sg-timer-live .btn-blue {
background: #007AFF; color: #fff;
}

body.page-sg-timer-live .btn-green {
background: var(--success-color); color: #fff;
}

body.page-sg-timer-live .btn-red {
background: var(--danger-color); color: #fff;
}

body.page-sg-timer-live .btn-outline {
background: transparent; border: 1px solid var(--accent-color); color: var(--accent-color);
}

/* Tabellen */

body.page-sg-timer-live .shot-table {
width: 100%; border-collapse: collapse;
}

body.page-sg-timer-live .shot-table th {
color: var(--accent-color); font-size: 12px; text-transform: uppercase; padding: 10px; border-bottom: 1px solid var(--border-color);
}

body.page-sg-timer-live .shot-table td {
padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.03); text-align: center;
}

body.page-sg-timer-live .shot-row-new {
animation: flashGreen 0.5s ease-out;
}

@keyframes flashGreen { 0% { background: rgba(76, 217, 100, 0.2); } 100% { background: transparent; } }


/* ==========================================================================
   Extracted scoped CSS from tools.html
   ========================================================================== */
/* ==========================================================================
           TOOLS & TRAINING - SPEZIFISCHES LAYOUT
           ========================================================================== */

body.page-tools .tool-section {
background: var(--card-bg);
            padding: 32px; 
            border-radius: var(--radius-lg); 
            border: 1px solid var(--border-color); 
            margin-bottom: 40px; 
            box-shadow: var(--shadow-sm);
}

body.page-tools .tool-section h2 {
margin-top: 0;
            font-size: 24px; 
            font-weight: 800; 
            color: var(--text-color); 
            border-bottom: 2px solid var(--bg-color); 
            padding-bottom: 16px; 
            margin-bottom: 24px; 
            display: flex; 
            align-items: center; 
            gap: 12px;
            letter-spacing: -0.5px;
}

/* Hit-Factor Spezifisch */

body.page-tools .scoring-grid {
display: grid;
            grid-template-columns: repeat(5, 1fr); 
            gap: 12px; 
            margin-bottom: 24px;
}

body.page-tools .scoring-grid .form-group {
margin-bottom: 0;
}

body.page-tools .scoring-grid input {
text-align: center;
            font-weight: 800; 
            font-size: 18px; 
            border-width: 2px;
            width: 100%;
            box-sizing: border-box;
}

body.page-tools .input-A {
border-color: rgba(16, 185, 129, 0.4) !important; background-color: rgba(16, 185, 129, 0.05) !important;
}

body.page-tools .input-M {
border-color: rgba(239, 68, 68, 0.4) !important; background-color: rgba(239, 68, 68, 0.05) !important;
}

body.page-tools .leaderboard {
width: 100%;
            border-collapse: separate; 
            border-spacing: 0;
            margin-top: 24px; 
            font-size: 15px;
}

body.page-tools .leaderboard th,
body.page-tools .leaderboard td {
padding: 14px 16px;
            text-align: left; 
            border-bottom: 1px solid var(--border-color);
}

body.page-tools .leaderboard th {
font-weight: 800;
            color: var(--text-muted); 
            text-transform: uppercase; 
            font-size: 12px; 
            letter-spacing: 0.5px;
            background-color: var(--bg-color);
}

body.page-tools .leaderboard th:first-child {
border-top-left-radius: 8px;
}

body.page-tools .leaderboard th:last-child {
border-top-right-radius: 8px;
}

body.page-tools .leaderboard tr {
transition: var(--transition);
}

body.page-tools .leaderboard tr:hover {
background-color: var(--input-bg); transform: scale(1.01);
}

body.page-tools .rank-1 {
font-weight: 900; color: var(--accent-color); font-size: 18px;
}

/* Dry-Fire Spezifisch */

body.page-tools .timer-display {
font-size: 64px;
            font-weight: 900; 
            text-align: center; 
            margin: 24px 0; 
            font-variant-numeric: tabular-nums; 
            color: var(--text-color); 
            letter-spacing: -2px;
            text-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

body.page-tools .timer-status {
text-align: center;
            font-size: 20px; 
            font-weight: 800; 
            color: var(--accent-color); 
            height: 30px; 
            margin-bottom: 20px; 
            text-transform: uppercase;
            letter-spacing: 1px;
}

body.page-tools .drill-box {
background: var(--input-bg);
            border: 2px dashed var(--border-color); 
            padding: 24px; 
            border-radius: var(--radius-lg); 
            text-align: center; 
            font-size: 16px; 
            line-height: 1.6; 
            margin-bottom: 24px; 
            min-height: 80px; 
            display: flex;
            align-items: center; 
            justify-content: center; 
            transition: var(--transition);
}

/* Select Formular-Anpassung für die Tools Seite */

body.page-tools .tool-section select {
background-color: var(--input-bg);
    border: 2px solid var(--border-color); 
    color: var(--text-color); 
    padding: 14px 16px; 
    border-radius: var(--radius); 
    font-size: 15px; 
    font-weight: 700; 
    width: 100%; 
    box-shadow: var(--shadow-sm);
    cursor: pointer; 
    outline: none; 
    appearance: none; 
    transition: var(--transition);
}

body.page-tools .tool-section select:focus {
border-color: var(--accent-color);
}

body.page-tools .tool-section .select-wrapper {
position: relative;
    margin-bottom: 24px;
}

body.page-tools .tool-section .select-wrapper::after {
content: "▼";
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

body.page-tools select:focus {
outline: none; border-color: var(--accent-color);
}

body.page-tools .btn-secondary {
background-color: var(--card-bg);
            color: var(--text-color); 
            border: 2px solid var(--border-color); 
            padding: 14px 24px; 
            font-size: 15px; 
            font-weight: 700; 
            border-radius: var(--radius); 
            cursor: pointer; 
            transition: var(--transition);
}

body.page-tools .btn-secondary:hover {
background-color: var(--bg-color);
            border-color: #cbd5e1; 
            transform: translateY(-2px);
}

/* Mobile Fixes */

@media (max-width: 768px) {
body.page-tools .tool-section {
padding: 20px !important; margin-bottom: 20px !important; border-radius: 20px !important;
}

body.page-tools .tool-section h2 {
font-size: 20px;
}

/* REPARIERTES MOBILES GRID FÜR DIE TREFFERAUFNAHME */

body.page-tools .scoring-grid {
grid-template-columns: repeat(2, 1fr) !important; 
                gap: 12px !important;
}

body.page-tools .scoring-grid .form-group:last-child {
grid-column: span 2 !important; /* No-Shoot bekommt die volle Breite im Umbruch */
}

body.page-tools .scoring-grid label {
font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 700;
}

body.page-tools .scoring-grid input {
padding: 12px 8px !important; font-size: 16px !important;
}

body.page-tools .leaderboard th,
body.page-tools .leaderboard td {
padding: 10px 6px; font-size: 13px;
}

body.page-tools .timer-display {
font-size: 56px;
}
}


/* ==========================================================================
   Extracted scoped CSS from wiederladen.html
   ========================================================================== */
/* ==========================================================================
           WIEDERLADEN-SPEZIFISCHES LAYOUT
           ========================================================================== */

body.page-wiederladen .tool-section {
background: var(--card-bg); 
            padding: 32px; 
            border-radius: var(--radius-lg); 
            border: 1px solid var(--border-color); 
            margin-bottom: 40px; 
            box-shadow: var(--shadow-sm);
}

body.page-wiederladen .tool-section h2 {
margin-top: 0; 
            font-size: 24px; 
            font-weight: 800; 
            color: var(--text-color); 
            border-bottom: 2px solid var(--bg-color); 
            padding-bottom: 16px; 
            margin-bottom: 24px; 
            display: flex; 
            align-items: center; 
            gap: 12px; 
            letter-spacing: -0.5px;
}

body.page-wiederladen .pf-input-grid {
display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 20px; 
            margin-bottom: 24px;
}

body.page-wiederladen .pf-full-row {
grid-column: span 2;
}

body.page-wiederladen .pf-dashboard-card {
background: var(--bg-color); 
            border: 2px dashed var(--border-color); 
            padding: 32px 24px; 
            border-radius: var(--radius-lg); 
            text-align: center; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            gap: 12px; 
            margin-top: 32px; 
            transition: var(--transition);
}

body.page-wiederladen .pf-display-label {
font-size: 13px; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            color: var(--text-muted); 
            font-weight: 800;
}

body.page-wiederladen .pf-display-number {
font-size: 56px; 
            font-weight: 900; 
            color: var(--text-color); 
            font-variant-numeric: tabular-nums; 
            line-height: 1; 
            letter-spacing: -2px;
            text-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

body.page-wiederladen .pf-status-badge {
display: inline-block; 
            padding: 8px 16px; 
            font-size: 13px; 
            font-weight: 800; 
            border-radius: 20px; 
            color: #fff; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            box-shadow: var(--shadow-sm); 
            margin-top: 8px;
}

body.page-wiederladen .tool-section select {
background-color: var(--input-bg);
    border: 2px solid var(--border-color); 
    color: var(--text-color); 
    padding: 14px 16px; 
    border-radius: var(--radius); 
    font-size: 15px; 
    font-weight: 700; 
    width: 100%; 
    box-shadow: var(--shadow-sm);
    cursor: pointer; 
    outline: none; 
    appearance: none; 
    transition: var(--transition);
}

body.page-wiederladen .tool-section select:focus {
border-color: var(--accent-color);
}

body.page-wiederladen .tool-section .select-wrapper {
position: relative;
    margin-bottom: 24px;
}

body.page-wiederladen .tool-section .select-wrapper::after {
content: "▼";
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

body.page-wiederladen select:focus {
outline: none; border-color: var(--accent-color);
}

body.page-wiederladen .recipe-card {
background: var(--card-bg); 
            border: 1px solid var(--border-color); 
            padding: 24px; 
            border-radius: var(--radius-lg); 
            position: relative; 
            display: flex; 
            flex-direction: column; 
            gap: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.02);
            transition: var(--transition);
}

body.page-wiederladen .recipe-card:hover {
transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            border-color: #cbd5e1;
}

@media (max-width: 768px) {
body.page-wiederladen .tool-section {
padding: 20px !important; margin-bottom: 24px !important; border-radius: 20px !important;
}

body.page-wiederladen .tool-section h2 {
font-size: 20px;
}

body.page-wiederladen .pf-input-grid {
grid-template-columns: 1fr; gap: 16px;
}

body.page-wiederladen .pf-full-row {
grid-column: span 1;
}

body.page-wiederladen .pf-display-number {
font-size: 48px;
}
}



/* ============================================================================
   FINAL MOBILE DENSITY RESET v25 – gegen iPhone-"Zoom" und zu große Buttons
   ============================================================================ */

html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

@media (max-width: 768px) {
    html,
    body {
        font-size: 14px !important;
    }

    body .container {
        max-width: 100% !important;
        margin-top: 14px !important;
        margin-bottom: 14px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    body .hero-section,
    body .news-section,
    body .dash-card,
    body .form-section,
    body #planner-section,
    body #logged-out-section,
    body #logged-out-msg,
    body #username-setup-section,
    body .post-card,
    body .match-card,
    body .match-item,
    body .tool-section,
    body .card,
    body .filter-bar,
    body .info-box,
    body .modal-content,
    body .comments-wrapper {
        padding: 14px 12px !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }

    body h1 {
        font-size: 24px !important;
        line-height: 1.15 !important;
    }

    body h2,
    body .hero-section h2,
    body .news-section-title,
    body .form-section h2,
    body #planner-section h2,
    body #logged-out-msg h2,
    body #username-setup-section h2 {
        font-size: 21px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    body h3,
    body #planner-section h3,
    body .dash-title,
    body .dash-card-title,
    body .match-details h3,
    body .post-meta h4 {
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    body p,
    body .dash-desc,
    body .news-item-body,
    body .match-details p,
    body .post-content {
        font-size: 13.5px !important;
        line-height: 1.4 !important;
    }

    body .dashboard-grid,
    body .match-list,
    body .news-timeline {
        gap: 12px !important;
        margin-bottom: 24px !important;
    }

    body .form-grid,
    body .planner-form-row {
        gap: 10px !important;
    }

    body .form-group,
    body .hit-input-group {
        margin-bottom: 12px !important;
    }

    body label,
    body .form-group label,
    body .hit-input-group label {
        font-size: 11px !important;
        margin-bottom: 5px !important;
        letter-spacing: 0.8px !important;
    }

    body input,
    body select,
    body textarea,
    body .form-group input,
    body .form-group select,
    body .form-group textarea,
    body .hit-input-group input,
    body .hit-input-group select,
    body .hit-input-group textarea,
    body .modal-content input,
    body .modal-content select,
    body .modal-content textarea {
        min-height: 38px !important;
        height: 38px !important;
        padding: 7px 10px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        border-radius: 10px !important;
    }

    body textarea,
    body .modal-content textarea {
        height: auto !important;
        min-height: 82px !important;
    }

    body button,
    body .btn-submit,
    body .btn-post,
    body .btn-primary-auth,
    body .btn-secondary-auth,
    body .btn-success,
    body .btn-contact,
    body .btn-delete,
    body .btn-edit,
    body .btn-export,
    body .btn-mediated,
    body .delete-btn,
    body .tab-button,
    body .comment-input-box button,
    body .action-buttons-group button {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 32px !important;
        height: auto !important;
        padding: 6px 10px !important;
        font-size: 12.5px !important;
        line-height: 1.15 !important;
        border-radius: 9px !important;
        flex: 0 0 auto !important;
    }

    body .btn-submit,
    body .btn-post,
    body .btn-primary-auth,
    body .btn-success {
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 13.5px !important;
        border-radius: 11px !important;
    }

    body .floating-action-bar button,
    body .floating-action-bar .btn-post {
        width: 100% !important;
        min-height: 40px !important;
        padding: 9px 14px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
    }

    body .action-buttons-group {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    body .badge {
        padding: 4px 7px !important;
        font-size: 10.5px !important;
        border-radius: 7px !important;
    }

    body .dash-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        border-radius: 9px !important;
    }
}

/* ==========================================================================
   PROFESSIONAL MOBILE POLISH v27 – kompakt, aber nicht gequetscht
   ========================================================================== */

/*
   Ziel:
   - nicht mehr "gezoomt"
   - Marktplatz-Karten kompakter
   - Login/Profile-Modal wieder hochwertig
   - Schrift professionell lesbar, nicht winzig
*/

html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

@media (max-width: 768px) {

    html,
    body {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }

    body .container,
    body.page-index .container,
    body.page-marktplatz .container,
    body.page-community .container,
    body.page-mein-planer .container,
    body.page-analytics .container,
    body.page-tools .container,
    body.page-freie-matches .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    body h1 {
        font-size: 28px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.5px !important;
    }

    body h2,
    body .hero-section h2,
    body .news-section-title,
    body .form-section h2,
    body #planner-section h2,
    body #logged-out-msg h2,
    body #username-setup-section h2 {
        font-size: 24px !important;
        line-height: 1.18 !important;
        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }

    body h3,
    body #planner-section h3,
    body .dash-title,
    body .dash-card-title,
    body .match-details h3,
    body .post-meta h4,
    body .news-item-title {
        font-size: 18px !important;
        line-height: 1.22 !important;
        margin-bottom: 8px !important;
    }

    body p,
    body .dash-desc,
    body .news-item-body,
    body .match-details p,
    body .post-content,
    body .info-box {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    body .hero-section,
    body .news-section,
    body .dash-card,
    body .form-section,
    body #planner-section,
    body #logged-out-section,
    body #logged-out-msg,
    body #username-setup-section,
    body .post-card,
    body .match-card,
    body .match-item,
    body .stage-card,
    body .tool-section,
    body .card,
    body .filter-bar,
    body .info-box,
    body .danger-box {
        padding: 18px 16px !important;
        margin-bottom: 18px !important;
        border-radius: 18px !important;
    }

    body .dashboard-grid,
    body .match-list,
    body .news-timeline {
        gap: 14px !important;
        margin-bottom: 28px !important;
    }

    body .form-grid,
    body .planner-form-row {
        gap: 12px !important;
    }

    body .form-group,
    body .hit-input-group {
        margin-bottom: 14px !important;
    }

    body label,
    body .form-group label,
    body .hit-input-group label {
        font-size: 12px !important;
        margin-bottom: 6px !important;
        letter-spacing: 0.8px !important;
    }

    body input,
    body select,
    body textarea,
    body .form-group input,
    body .form-group select,
    body .form-group textarea,
    body .hit-input-group input,
    body .hit-input-group select,
    body .hit-input-group textarea,
    body .modal-content input,
    body .modal-content select,
    body .modal-content textarea {
        min-height: 42px !important;
        height: 42px !important;
        padding: 9px 13px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        border-radius: 12px !important;
        border-width: 1.5px !important;
    }

    body textarea,
    body .modal-content textarea {
        height: auto !important;
        min-height: 90px !important;
    }

    body button,
    body .btn-submit,
    body .btn-post,
    body .btn-primary-auth,
    body .btn-secondary-auth,
    body .btn-success,
    body .btn-contact,
    body .btn-delete,
    body .btn-edit,
    body .btn-export,
    body .btn-mediated,
    body .delete-btn,
    body .tab-button,
    body .comment-input-box button,
    body .action-buttons-group button {
        min-height: 40px !important;
        height: auto !important;
        padding: 9px 14px !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    body .floating-action-bar {
        width: calc(100% - 28px) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    body .floating-action-bar button,
    body .floating-action-bar .btn-post {
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
    }

    body .badge {
        padding: 5px 9px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        line-height: 1.15 !important;
    }

    body .dash-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 20px !important;
        border-radius: 11px !important;
    }

    body .card-avatar,
    body .avatar-placeholder-flex,
    body .avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 16px !important;
    }
}

/* ==========================================================================
   MARKTPLATZ PROFESSIONAL COMPACT v27
   ========================================================================== */

@media (max-width: 768px) {

    body.page-marktplatz .container {
        margin-top: 16px !important;
    }

    body.page-marktplatz h2[data-txt="list-title"] {
        font-size: 25px !important;
        line-height: 1.15 !important;
        margin: 22px 0 16px !important;
    }

    body.page-marktplatz .info-box,
    body.page-marktplatz .form-section,
    body.page-marktplatz .filter-bar {
        padding: 16px 14px !important;
        margin-bottom: 16px !important;
        border-radius: 16px !important;
    }

    body.page-marktplatz .match-list {
        gap: 14px !important;
    }

    body.page-marktplatz .match-card {
        padding: 14px 14px 14px 16px !important;
        margin-bottom: 14px !important;
        border-radius: 18px !important;
        gap: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    }

    body.page-marktplatz .match-card::before {
        width: 4px !important;
    }

    body.page-marktplatz .match-header-flex {
        align-items: flex-start !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    body.page-marktplatz .match-details {
        min-width: 0 !important;
        width: 100% !important;
    }

    body.page-marktplatz .match-details h3 {
        font-size: 18px !important;
        line-height: 1.18 !important;
        margin: 0 0 8px 0 !important;
        gap: 7px !important;
        flex-wrap: wrap !important;
    }

    body.page-marktplatz .match-details p {
        font-size: 14px !important;
        line-height: 1.35 !important;
        margin: 5px 0 !important;
    }

    body.page-marktplatz .badge-container {
        gap: 6px !important;
        margin-top: 8px !important;
    }

    body.page-marktplatz .badge,
    body.page-marktplatz .rating-badge {
        padding: 5px 8px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    body.page-marktplatz .card-avatar,
    body.page-marktplatz .avatar-placeholder-flex {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin-top: 2px !important;
    }

    body.page-marktplatz .card-actions {
        width: 100% !important;
        border-top: 1px solid var(--border-color) !important;
        padding-top: 10px !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    body.page-marktplatz .btn-contact {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        border-radius: 13px !important;
        box-shadow: 0 6px 16px rgba(255, 159, 67, 0.22) !important;
    }

    body.page-marktplatz .action-buttons-group {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 4px !important;
    }

    body.page-marktplatz .action-buttons-group button,
    body.page-marktplatz .btn-export,
    body.page-marktplatz .btn-report,
    body.page-marktplatz .btn-delete,
    body.page-marktplatz .btn-edit,
    body.page-marktplatz .btn-mediated {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-radius: 13px !important;
        flex: unset !important;
    }
}

/* ==========================================================================
   MODAL / LOGIN PROFESSIONAL POLISH v27
   ========================================================================== */

@media (max-width: 768px) {

    body .modal,
    body .modal-overlay {
        padding: 14px !important;
        align-items: center !important;
    }

    body .modal-content {
        width: min(100%, 430px) !important;
        max-width: calc(100vw - 28px) !important;
        max-height: calc(100dvh - 110px) !important;
        padding: 22px 18px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(148, 163, 184, 0.35) !important;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28) !important;
    }

    body .modal-content h3 {
        font-size: 22px !important;
        line-height: 1.15 !important;
        margin-bottom: 16px !important;
        padding-right: 42px !important;
    }

    body .modal-close-container {
        top: 16px !important;
        right: 16px !important;
    }

    body .modal-close-trigger {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 24px !important;
        background: var(--input-bg) !important;
    }

    body .modal-divider {
        margin: 22px 0 !important;
        font-size: 13px !important;
        letter-spacing: 1.5px !important;
    }

    body .modal-footer {
        margin-top: 22px !important;
        padding-top: 16px !important;
    }

    body .btn-social-google,
    body .btn-social-apple,
    body .btn-social-passkey {
        width: auto !important;
        min-width: 220px !important;
        max-width: 100% !important;
        min-height: 42px !important;
        padding: 9px 16px !important;
        font-size: 14px !important;
        border-radius: 13px !important;
    }
}

/* ==========================================================================
   PROFILE SETTINGS POLISH v27
   ========================================================================== */

@media (max-width: 768px) {
    body #modal-settings-view .form-group,
    body #modal-settings-view .settings-section,
    body #modal-settings-view [style*="background"] {
        border-radius: 16px !important;
    }

    body #modal-settings-view input,
    body #modal-settings-view select,
    body #modal-settings-view textarea {
        min-height: 42px !important;
        height: 42px !important;
        font-size: 15px !important;
    }
}

/* ==========================================================================
   MARKTPLATZ DENSE CARD LAYOUT v28 – kompakte professionelle Einträge
   ========================================================================== */

@media (max-width: 768px) {

    body.page-marktplatz .container {
        margin-top: 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.page-marktplatz h2[data-txt="list-title"] {
        font-size: 23px !important;
        line-height: 1.12 !important;
        margin: 18px 0 12px !important;
        letter-spacing: -0.4px !important;
    }

    body.page-marktplatz .match-list {
        gap: 10px !important;
    }

    body.page-marktplatz .match-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 11px 11px 11px 13px !important;
        margin-bottom: 10px !important;
        border-radius: 15px !important;
        gap: 9px !important;
        min-height: 0 !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
    }

    body.page-marktplatz .match-card::before {
        width: 4px !important;
    }

    body.page-marktplatz .match-header-flex {
        display: grid !important;
        grid-template-columns: 38px 1fr !important;
        gap: 9px !important;
        align-items: start !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.page-marktplatz .card-avatar,
    body.page-marktplatz .avatar-placeholder-flex {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        margin-top: 1px !important;
        border-width: 1.5px !important;
    }

    body.page-marktplatz .match-details {
        min-width: 0 !important;
        width: 100% !important;
    }

    body.page-marktplatz .match-details h3 {
        font-size: 16px !important;
        line-height: 1.15 !important;
        margin: 0 0 5px 0 !important;
        gap: 5px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    body.page-marktplatz .match-details h3 a {
        font-size: 16px !important;
        line-height: 1.15 !important;
    }

    body.page-marktplatz .match-details p {
        font-size: 12.5px !important;
        line-height: 1.28 !important;
        margin: 3px 0 !important;
    }

    body.page-marktplatz .badge-container {
        gap: 5px !important;
        margin-top: 6px !important;
    }

    body.page-marktplatz .badge,
    body.page-marktplatz .rating-badge {
        padding: 4px 7px !important;
        font-size: 10.5px !important;
        line-height: 1.05 !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        margin-left: 0 !important;
    }

    body.page-marktplatz .card-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        width: 100% !important;
        border-top: 1px solid var(--border-color) !important;
        padding-top: 8px !important;
        margin-top: 2px !important;
        align-items: stretch !important;
    }

    body.page-marktplatz .card-actions > .btn-contact {
        width: 100% !important;
        min-height: 34px !important;
        padding: 7px 8px !important;
        font-size: 12.5px !important;
        line-height: 1.1 !important;
        border-radius: 11px !important;
        box-shadow: 0 5px 12px rgba(255, 159, 67, 0.18) !important;
        white-space: nowrap !important;
    }

    body.page-marktplatz .action-buttons-group {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        margin-top: 0 !important;
    }

    body.page-marktplatz .action-buttons-group button,
    body.page-marktplatz .btn-export,
    body.page-marktplatz .btn-report,
    body.page-marktplatz .btn-delete,
    body.page-marktplatz .btn-edit,
    body.page-marktplatz .btn-mediated {
        width: 100% !important;
        min-height: 34px !important;
        padding: 7px 8px !important;
        font-size: 12.5px !important;
        line-height: 1.1 !important;
        border-radius: 11px !important;
        flex: unset !important;
        white-space: nowrap !important;
    }

    body.page-marktplatz .form-section,
    body.page-marktplatz .filter-bar,
    body.page-marktplatz .info-box {
        padding: 14px 12px !important;
        margin-bottom: 14px !important;
        border-radius: 15px !important;
    }

    body.page-marktplatz .toggle-selector {
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }

    body.page-marktplatz .toggle-selector label {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
}


/* ==========================================================================
   IPSC PREMIUM UI v29 – professioneller Mobile-Look
   ========================================================================== */

:root {
    --premium-radius: 18px;
    --premium-radius-sm: 12px;
    --premium-card-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    --premium-card-shadow-dark: 0 14px 34px rgba(0, 0, 0, 0.28);
}

/* Header-Platz reservieren: verhindert sichtbares Springen beim Logo/Header */
#main-header {
    min-height: 152px !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    #main-header {
        min-height: 155px !important;
    }
}

@media (max-width: 768px) {

    html,
    body {
        font-size: 14px !important;
        line-height: 1.45 !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    body .container,
    body.page-index .container,
    body.page-marktplatz .container,
    body.page-community .container,
    body.page-mein-planer .container,
    body.page-analytics .container,
    body.page-tools .container,
    body.page-freie-matches .container,
    body.page-schiessbuch .container,
    body.page-wiederladen .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    body h1 {
        font-size: 28px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.4px !important;
    }

    body h2,
    body .hero-section h2,
    body .news-section-title,
    body .form-section h2,
    body #planner-section h2,
    body #logged-out-msg h2,
    body #username-setup-section h2 {
        font-size: 24px !important;
        line-height: 1.18 !important;
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        letter-spacing: -0.35px !important;
    }

    body h3,
    body #planner-section h3,
    body .dash-title,
    body .dash-card-title,
    body .match-details h3,
    body .post-meta h4,
    body .news-item-title {
        font-size: 18px !important;
        line-height: 1.22 !important;
        margin-bottom: 8px !important;
    }

    body p,
    body .dash-desc,
    body .news-item-body,
    body .match-details p,
    body .post-content,
    body .info-box {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    body .hero-section,
    body .news-section,
    body .dash-card,
    body .form-section,
    body #planner-section,
    body #logged-out-section,
    body #logged-out-msg,
    body #username-setup-section,
    body .post-card,
    body .match-card,
    body .match-item,
    body .stage-card,
    body .tool-section,
    body .card,
    body .filter-bar,
    body .info-box,
    body .danger-box {
        padding: 18px 16px !important;
        margin-bottom: 18px !important;
        border-radius: var(--premium-radius) !important;
        box-shadow: var(--premium-card-shadow) !important;
    }

    html[data-theme="dark"] body .hero-section,
    html[data-theme="dark"] body .news-section,
    html[data-theme="dark"] body .dash-card,
    html[data-theme="dark"] body .form-section,
    html[data-theme="dark"] body #planner-section,
    html[data-theme="dark"] body #logged-out-section,
    html[data-theme="dark"] body #logged-out-msg,
    html[data-theme="dark"] body #username-setup-section,
    html[data-theme="dark"] body .post-card,
    html[data-theme="dark"] body .match-card,
    html[data-theme="dark"] body .match-item,
    html[data-theme="dark"] body .stage-card,
    html[data-theme="dark"] body .tool-section,
    html[data-theme="dark"] body .card,
    html[data-theme="dark"] body .filter-bar,
    html[data-theme="dark"] body .info-box,
    html[data-theme="dark"] body .danger-box {
        box-shadow: var(--premium-card-shadow-dark) !important;
    }

    body input,
    body select,
    body textarea,
    body .form-group input,
    body .form-group select,
    body .form-group textarea,
    body .hit-input-group input,
    body .hit-input-group select,
    body .hit-input-group textarea,
    body .modal-content input,
    body .modal-content select,
    body .modal-content textarea {
        min-height: 42px !important;
        height: 42px !important;
        padding: 9px 13px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        border-radius: 12px !important;
        border-width: 1.5px !important;
    }

    body textarea,
    body .modal-content textarea {
        height: auto !important;
        min-height: 92px !important;
    }

    body button,
    body .btn-submit,
    body .btn-post,
    body .btn-primary-auth,
    body .btn-secondary-auth,
    body .btn-success,
    body .btn-contact,
    body .btn-delete,
    body .btn-edit,
    body .btn-export,
    body .btn-mediated,
    body .delete-btn,
    body .tab-button,
    body .comment-input-box button,
    body .action-buttons-group button {
        min-height: 40px !important;
        height: auto !important;
        padding: 9px 14px !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   MARKTPLATZ v29 – einklappbares Formular und kompakte Premium-Karten
   ========================================================================== */

.market-form-accordion {
    margin-bottom: 18px !important;
}

.market-form-toggle {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    border: 1px solid var(--border-color) !important;
    background:
        linear-gradient(135deg, rgba(255, 159, 67, 0.12), rgba(255, 128, 8, 0.03)),
        var(--card-bg) !important;
    color: var(--text-color) !important;
    box-shadow: var(--premium-card-shadow) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "kicker icon"
        "title icon"
        "text icon" !important;
    text-align: left !important;
    align-items: center !important;
    gap: 3px 12px !important;
    cursor: pointer !important;
}

html[data-theme="dark"] .market-form-toggle {
    box-shadow: var(--premium-card-shadow-dark) !important;
}

.market-form-toggle-kicker {
    grid-area: kicker !important;
    color: var(--accent-color) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
}

.market-form-toggle-title {
    grid-area: title !important;
    font-size: 23px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.45px !important;
}

.market-form-toggle-text {
    grid-area: text !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
}

.market-form-toggle-icon {
    grid-area: icon !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: var(--accent-gradient) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(255, 128, 8, 0.28) !important;
}

.market-form-panel[hidden] {
    display: none !important;
}

.market-form-panel {
    margin-top: 12px !important;
}

/* Marktplatz Cards */
body.page-marktplatz .match-list {
    gap: 12px !important;
}

body.page-marktplatz .match-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 13px 13px 13px 15px !important;
    margin-bottom: 12px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="dark"] body.page-marktplatz .match-card {
    background: #121a29 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.30) !important;
}

body.page-marktplatz .match-card::before {
    width: 4px !important;
}

body.page-marktplatz .match-header-flex {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.page-marktplatz .match-summary {
    min-width: 0 !important;
}

body.page-marktplatz .match-title {
    font-size: 17px !important;
    line-height: 1.16 !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.25px !important;
    color: var(--text-color) !important;
}

body.page-marktplatz .badge-container {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    margin: 0 0 6px 0 !important;
}

body.page-marktplatz .badge,
body.page-marktplatz .rating-badge {
    padding: 4px 7px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    border-radius: 8px !important;
    font-weight: 850 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

body.page-marktplatz .badge-level {
    background: rgba(100, 116, 139, 0.22) !important;
    color: var(--text-color) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

body.page-marktplatz .badge-squad {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.28) !important;
}

body.page-marktplatz .badge-country {
    background: rgba(168, 85, 247, 0.16) !important;
    color: #c084fc !important;
    border-color: rgba(192, 132, 252, 0.28) !important;
}

body.page-marktplatz .badge-offer {
    background: rgba(255, 159, 67, 0.12) !important;
    color: var(--accent-color) !important;
    border-color: rgba(255, 159, 67, 0.26) !important;
}

body.page-marktplatz .badge-want,
body.page-marktplatz .badge-trusted {
    background: rgba(52, 211, 153, 0.14) !important;
    color: var(--success-color) !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
}

body.page-marktplatz .seller-link {
    min-height: 0 !important;
    padding: 0 !important;
    width: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    display: inline !important;
    text-align: left !important;
}

body.page-marktplatz .seller-link strong {
    color: var(--accent-color) !important;
}

body.page-marktplatz .match-meta {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    margin-top: 5px !important;
}

body.page-marktplatz .card-avatar,
body.page-marktplatz .avatar-placeholder-flex {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin-top: 2px !important;
    border-width: 1.5px !important;
}

body.page-marktplatz .card-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
        "price primary"
        "secondary secondary" !important;
    gap: 8px !important;
    align-items: center !important;
    border-top: 1px solid var(--border-color) !important;
    padding-top: 9px !important;
}

body.page-marktplatz .match-price {
    grid-area: price !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    color: var(--text-color) !important;
    white-space: nowrap !important;
    padding-right: 4px !important;
}

body.page-marktplatz .primary-actions {
    grid-area: primary !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    min-width: 0 !important;
}

body.page-marktplatz .action-buttons-group {
    grid-area: secondary !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
}

body.page-marktplatz .manage-actions {
    grid-template-columns: 1fr 1fr 1fr !important;
}

body.page-marktplatz .btn-contact,
body.page-marktplatz .btn-contact-want,
body.page-marktplatz .btn-export,
body.page-marktplatz .btn-report,
body.page-marktplatz .btn-delete,
body.page-marktplatz .btn-edit,
body.page-marktplatz .btn-mediated {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
}

body.page-marktplatz .btn-contact {
    box-shadow: 0 6px 16px rgba(255, 159, 67, 0.20) !important;
}

body.page-marktplatz .btn-contact-secondary {
    background: rgba(255, 159, 67, 0.12) !important;
    color: var(--accent-color) !important;
    border: 1px solid rgba(255, 159, 67, 0.24) !important;
    box-shadow: none !important;
}

/* Mobile speziell */
@media (max-width: 768px) {
    body.page-marktplatz .container {
        margin-top: 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.page-marktplatz h2[data-txt="list-title"] {
        font-size: 24px !important;
        line-height: 1.12 !important;
        margin: 18px 0 12px !important;
    }

    body.page-marktplatz .info-box {
        padding: 13px 12px !important;
        font-size: 13px !important;
    }

    body.page-marktplatz .form-section,
    body.page-marktplatz .filter-bar {
        padding: 14px 12px !important;
        border-radius: 15px !important;
    }

    body.page-marktplatz .toggle-selector {
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }

    body.page-marktplatz .toggle-selector label {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
}

/* ==========================================================================
   LOGIN / PROFIL MODAL v29 – hochwertiger, ruhiger, weniger wuchtig
   ========================================================================== */

#auth-modal {
    backdrop-filter: blur(16px) saturate(1.15) !important;
}

#auth-modal .modal-content {
    overflow: hidden auto !important;
}

#auth-modal .modal-content::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 4px !important;
    background: var(--accent-gradient) !important;
}

#auth-modal .modal-content h3 {
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
}

#auth-modal .form-group {
    margin-bottom: 14px !important;
}

#auth-modal .form-group label {
    font-size: 12px !important;
    letter-spacing: 1.1px !important;
    font-weight: 850 !important;
}

#auth-modal input,
#auth-modal select,
#auth-modal textarea {
    border-width: 1.5px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

#auth-modal .btn-primary-auth {
    width: auto !important;
    min-width: 230px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(255, 159, 67, 0.26) !important;
}

#auth-modal .social-login-separator {
    margin: 22px 0 12px 0 !important;
    padding-top: 18px !important;
}

#auth-modal .social-login-separator p {
    font-size: 12px !important;
    letter-spacing: 1.7px !important;
    opacity: 0.86 !important;
}

#auth-modal .btn-social-passkey,
#auth-modal .btn-social-apple,
#auth-modal .btn-social-google {
    width: auto !important;
    min-width: 250px !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 9px 17px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    justify-content: center !important;
}

@media (max-width: 768px) {
    #auth-modal,
    .modal {
        align-items: center !important;
        padding: 14px !important;
    }

    #auth-modal .modal-content {
        width: min(100%, 440px) !important;
        max-width: calc(100vw - 28px) !important;
        max-height: calc(100dvh - 118px) !important;
        padding: 24px 20px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(148, 163, 184, 0.35) !important;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36) !important;
    }

    #auth-modal .modal-content h3 {
        font-size: 24px !important;
        margin-bottom: 18px !important;
        padding-right: 42px !important;
    }

    #auth-modal .modal-close-container {
        top: 17px !important;
        right: 17px !important;
    }

    #auth-modal .modal-close-trigger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        font-size: 25px !important;
        background: rgba(148, 163, 184, 0.10) !important;
    }
}

/* ==========================================================================
   HEADER v29 – Logo stabil, Avatar hochwertig
   ========================================================================== */

@media (max-width: 768px) {
    header .header-logo-frame {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        flex: 0 0 52px !important;
    }

    header .header-logo-img {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        object-fit: contain !important;
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
    }

    header #btn-open-settings.header-avatar-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex: 0 0 48px !important;
    }

    header #btn-open-settings.header-avatar-btn img,
    header #header-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }
}

/* Marktplatz static form utility classes v29 */
body.page-marktplatz .ad-type-offer {
    font-weight: 850 !important;
    color: var(--accent-color) !important;
}

body.page-marktplatz .ad-type-want {
    font-weight: 850 !important;
    color: var(--success-color) !important;
}

body.page-marktplatz .market-form-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
}
@media (max-width: 768px) {
    body.page-marktplatz .market-form-actions {
        gap: 8px !important;
        margin-top: 14px !important;
        flex-wrap: wrap !important;
    }
}

/* Marktplatz modal utility classes v29 */
body.page-marktplatz #btn-cancel-edit {
    display: none;
}

body.page-marktplatz .mediated-desc {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin-bottom: 15px !important;
    line-height: 1.45 !important;
}

body.page-marktplatz .rating-group {
    margin-bottom: 15px !important;
}

body.page-marktplatz .rating-group-last {
    margin-bottom: 20px !important;
}

body.page-marktplatz .rating-label {
    text-transform: none !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

body.page-marktplatz .mediated-submit {
    width: 100% !important;
    background: linear-gradient(135deg, var(--success-color), #059669) !important;
}

/* ==========================================================================
   PREMIUM POLISH v30 – Header dichter, Modals zentral, Marktplatz sauber
   ========================================================================== */

/* Header: unnötigen Weißraum unter dem Claim reduzieren */
@media (max-width: 768px) {
    #main-header {
        min-height: 132px !important;
        padding-bottom: 10px !important;
    }

    header {
        padding-top: calc(env(safe-area-inset-top) + 12px) !important;
        padding-bottom: 10px !important;
    }

    header .header-logo-link {
        gap: 10px !important;
        margin-bottom: 0 !important;
    }

    header .logo-text-group p {
        margin-top: 1px !important;
        margin-bottom: 0 !important;
    }

    header .header-controls {
        margin-top: 5px !important;
        gap: 8px !important;
    }

    header .header-logo-frame {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        flex: 0 0 50px !important;
    }

    header .header-logo-img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }
}

/* Login / Profil-Modals: mittig und hochwertiger */
@media (max-width: 768px) {
    #auth-modal,
    .modal,
    .modal-overlay {
        align-items: center !important;
        justify-content: center !important;
    }

    #auth-modal .modal-content {
        margin: auto !important;
        transform: none !important;
        width: min(100%, 430px) !important;
        max-width: calc(100vw - 30px) !important;
        max-height: calc(100dvh - 132px) !important;
        padding: 24px 20px !important;
        border-radius: 24px !important;
    }

    #auth-modal .btn-primary-auth,
    #auth-modal .btn-social-passkey,
    #auth-modal .btn-social-apple,
    #auth-modal .btn-social-google {
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
    }
}

/* Marktplatz: Delete oben rechts, keine überlagernden Buttons */
body.page-marktplatz .match-card {
    position: relative !important;
}

body.page-marktplatz .card-delete-top {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 5 !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: var(--danger-color) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    box-shadow: none !important;
}

body.page-marktplatz .card-delete-top:hover {
    background: var(--danger-color) !important;
    color: #fff !important;
}

body.page-marktplatz .manage-actions {
    grid-template-columns: 1fr 1fr !important;
}

@media (max-width: 768px) {
    body.page-marktplatz .match-card {
        padding-right: 44px !important;
    }

    body.page-marktplatz .card-delete-top {
        top: 9px !important;
        right: 9px !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        font-size: 18px !important;
    }

    body.page-marktplatz .card-actions {
        grid-template-columns: auto 1fr !important;
        grid-template-areas:
            "price primary"
            "secondary secondary"
            "manage manage" !important;
    }

    body.page-marktplatz .manage-actions {
        grid-area: manage !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Planer: Match erstellen einklappbar wie Marktplatz */
body.page-mein-planer .planner-form-accordion {
    margin-bottom: 22px !important;
}

body.page-mein-planer .planner-form-toggle {
    width: 100% !important;
    min-height: 74px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    box-shadow: var(--shadow-sm) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "kicker icon"
        "title icon"
        "text icon" !important;
    text-align: left !important;
    align-items: center !important;
    gap: 2px 12px !important;
    cursor: pointer !important;
}

body.page-mein-planer .planner-form-toggle-kicker {
    grid-area: kicker !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--accent-color) !important;
}

body.page-mein-planer .planner-form-toggle-title {
    grid-area: title !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

body.page-mein-planer .planner-form-toggle-text {
    grid-area: text !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

body.page-mein-planer .planner-form-toggle-icon {
    grid-area: icon !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 159, 67, 0.12) !important;
    color: var(--accent-color) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

body.page-mein-planer .planner-form-panel {
    margin-top: 12px !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.page-mein-planer .planner-form-panel[hidden] {
    display: none !important;
}

body.page-mein-planer .planned-heading {
    margin-top: 24px !important;
}

@media (max-width: 768px) {
    body.page-mein-planer .planner-form-toggle {
        min-height: 66px !important;
        padding: 14px 14px !important;
        border-radius: 16px !important;
    }

    body.page-mein-planer .planner-form-toggle-title {
        font-size: 18px !important;
    }

    body.page-mein-planer .planner-form-panel {
        padding: 15px 13px !important;
        border-radius: 16px !important;
    }
}

/* ==========================================================================
   PREMIUM PATCH v31 – Community Plus, Header/Modal Feinschliff
   ========================================================================== */

@media (max-width: 768px) {

    /* Header noch etwas flacher, ohne Premium-Look zu verlieren */
    header {
        padding-bottom: 10px !important;
    }

    header .header-controls {
        margin-top: 8px !important;
    }

    header .logo-text-group p {
        margin-top: 1px !important;
    }

    /* Community: sichtbarer Beitrag-erstellen-Button oben im Feed */
    body.page-community .community-create-card {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        min-height: 52px !important;
        margin: 0 0 16px 0 !important;
        padding: 12px 16px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255, 159, 67, 0.25) !important;
        background: linear-gradient(135deg, rgba(255, 159, 67, 0.14), rgba(255, 128, 8, 0.06)) !important;
        color: var(--text-color) !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        box-shadow: var(--shadow-sm) !important;
        cursor: pointer !important;
    }

    body.page-community .community-create-plus {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--accent-gradient) !important;
        color: #fff !important;
        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        box-shadow: 0 8px 18px rgba(255, 159, 67, 0.22) !important;
    }

    body.page-community .community-create-text {
        line-height: 1.1 !important;
    }

    /* Alte lange Floating-Bar wird auf Mobile ein edler runder Plus-FAB */
    body.page-community .floating-action-bar {
        width: auto !important;
        left: auto !important;
        right: 18px !important;
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        transform: none !important;
        max-width: none !important;
        z-index: 100000 !important;
    }

    body.page-community .floating-action-bar .btn-post {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 16px 34px rgba(255, 128, 8, 0.35) !important;
    }

    body.page-community .floating-action-bar .btn-post span {
        font-size: 34px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Modals nicht unter die Bottom-Navigation/Safari-Leiste rutschen lassen */
    body .modal,
    body .modal-overlay {
        align-items: center !important;
        padding-top: max(14px, env(safe-area-inset-top)) !important;
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    body .modal-content {
        margin-top: auto !important;
        margin-bottom: auto !important;
        max-height: calc(100dvh - 150px - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body .modal-content h3 {
        margin-top: 0 !important;
    }
}

@media (min-width: 769px) {
    body.page-community .community-create-card {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 0 18px 0 !important;
        padding: 12px 18px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 159, 67, 0.25) !important;
        background: linear-gradient(135deg, rgba(255, 159, 67, 0.14), rgba(255, 128, 8, 0.06)) !important;
        color: var(--text-color) !important;
        font-weight: 800 !important;
        cursor: pointer !important;
    }

    body.page-community .community-create-plus {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--accent-gradient) !important;
        color: #fff !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }
}

/* ==========================================================================
   FINAL UX FIX v32 – echte Fehler aus iPhone-Screenshots
   ========================================================================== */

@media (max-width: 768px) {

    /* Login: Button nicht wie ein Fremdkörper, sondern sauber im Formularfluss */
    body #modal-login-view #login-form button[type="submit"],
    body #login-form .btn-primary-auth,
    body #login-form .btn-submit {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        margin: 14px 0 18px 0 !important;
        padding: 11px 16px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        justify-content: center !important;
        display: flex !important;
    }

    body #modal-login-view .form-group {
        margin-bottom: 14px !important;
    }

    body #modal-login-view input {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 15px !important;
    }

    body #modal-login-view .modal-divider {
        margin: 18px 0 !important;
    }

    /* Startseite: mobile Inhalte deutlich kompakter */
    body.page-index .container {
        margin-top: 14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.page-index .hero-section {
        padding: 18px 14px !important;
        margin-bottom: 14px !important;
        border-radius: 18px !important;
    }

    body.page-index .hero-section h2 {
        font-size: 23px !important;
        line-height: 1.16 !important;
        margin-bottom: 10px !important;
        letter-spacing: -0.35px !important;
    }

    body.page-index .hero-section p {
        font-size: 14px !important;
        line-height: 1.42 !important;
    }

    body.page-index .news-section {
        padding: 16px 14px !important;
        margin-bottom: 18px !important;
        border-radius: 18px !important;
    }

    body.page-index .news-section-title {
        font-size: 22px !important;
        line-height: 1.15 !important;
        margin-bottom: 13px !important;
        padding-bottom: 10px !important;
    }

    body.page-index .news-timeline {
        gap: 14px !important;
    }

    body.page-index .news-item {
        padding-left: 12px !important;
    }

    body.page-index .news-date {
        font-size: 10.5px !important;
        margin-bottom: 4px !important;
    }

    body.page-index .news-item-title {
        font-size: 17px !important;
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
    }

    body.page-index .news-item-body {
        font-size: 13.5px !important;
        line-height: 1.38 !important;
    }

    /* Marktplatz: Karten wirklich kompakt, nicht nur hübsch */
    body.page-marktplatz .container {
        margin-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.page-marktplatz h2[data-txt="list-title"] {
        font-size: 22px !important;
        line-height: 1.12 !important;
        margin: 15px 0 10px !important;
        letter-spacing: -0.35px !important;
    }

    body.page-marktplatz .match-list {
        gap: 10px !important;
    }

    body.page-marktplatz .match-card {
        padding: 11px 11px 11px 13px !important;
        margin-bottom: 10px !important;
        border-radius: 16px !important;
        gap: 7px !important;
        min-height: 0 !important;
    }

    body.page-marktplatz .match-header-flex {
        display: grid !important;
        grid-template-columns: 38px 1fr !important;
        gap: 9px !important;
        align-items: start !important;
    }

    body.page-marktplatz .card-avatar,
    body.page-marktplatz .avatar-placeholder-flex {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    body.page-marktplatz .match-title,
    body.page-marktplatz .match-details h3 {
        font-size: 16px !important;
        line-height: 1.15 !important;
        margin-bottom: 5px !important;
    }

    body.page-marktplatz .badge-container {
        gap: 4px !important;
        margin-bottom: 5px !important;
    }

    body.page-marktplatz .badge,
    body.page-marktplatz .rating-badge {
        padding: 3px 6px !important;
        font-size: 10px !important;
        border-radius: 7px !important;
    }

    body.page-marktplatz .seller-link {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    body.page-marktplatz .match-meta {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-top: 3px !important;
    }

    body.page-marktplatz .card-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding-top: 7px !important;
        margin-top: 4px !important;
        border-top: 1px solid var(--border-color) !important;
        align-items: stretch !important;
    }

    body.page-marktplatz .match-price {
        grid-column: 1 / -1 !important;
        font-size: 14px !important;
        line-height: 1 !important;
        margin: 0 0 1px 0 !important;
        padding: 0 !important;
    }

    body.page-marktplatz .primary-actions,
    body.page-marktplatz .action-buttons-group,
    body.page-marktplatz .manage-actions {
        display: contents !important;
    }

    body.page-marktplatz .btn-contact,
    body.page-marktplatz .btn-contact-want,
    body.page-marktplatz .btn-export,
    body.page-marktplatz .btn-report,
    body.page-marktplatz .btn-delete,
    body.page-marktplatz .btn-edit,
    body.page-marktplatz .btn-mediated {
        width: 100% !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 6px 7px !important;
        font-size: 11.5px !important;
        line-height: 1.05 !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
    }

    body.page-marktplatz .market-form-accordion {
        scroll-margin-top: 155px !important;
    }

    body.page-marktplatz .market-form-toggle {
        padding: 13px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }

    body.page-marktplatz .market-form-toggle-title {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    body.page-marktplatz .market-form-toggle-text {
        font-size: 13px !important;
    }

    body.page-marktplatz .filter-bar {
        padding: 13px 12px !important;
        margin-bottom: 13px !important;
    }

    /* Matches / Planer: Karten weniger aufgeblasen */
    body.page-freie-matches .match-card,
    body.page-mein-planer .match-card,
    body.page-mein-planer .planned-match-card,
    body.page-schiessbuch .card {
        padding: 15px 13px !important;
        margin-bottom: 14px !important;
        border-radius: 17px !important;
    }
}

/* ==========================================================================
   FINAL POLISH v33 – Übersetzung, Owner-Actions, Login, Community
   ========================================================================== */

@media (max-width: 768px) {

    /* Allgemein: etwas weicher und runder */
    body .card,
    body .dash-card,
    body .form-section,
    body .tool-section,
    body .news-section,
    body .hero-section,
    body .post-card,
    body .match-card,
    body .modal-content,
    body .filter-bar,
    body .info-box {
        border-radius: 20px !important;
    }

    /* Login-Button exakt wie die Inputs führen: keine schwebende Insel */
    body #auth-modal #modal-login-view form#login-form {
        display: block !important;
    }

    body #auth-modal #modal-login-view form#login-form > button[type="submit"],
    body #auth-modal #modal-login-view #login-form .btn-primary-auth {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 12px 0 16px 0 !important;
        padding: 0 16px !important;
        border-radius: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        font-size: 15px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    body #auth-modal #modal-login-view .social-login-separator {
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

    /* Community: nur der kleine orange Plus-FAB, keine doppelte große Leiste */
    body.page-community .community-create-card {
        display: none !important;
    }

    body.page-community .floating-action-bar {
        width: auto !important;
        left: auto !important;
        right: 18px !important;
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        transform: none !important;
        z-index: 100000 !important;
    }

    body.page-community .floating-action-bar .btn-post {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        box-shadow: 0 16px 34px rgba(255, 128, 8, 0.35) !important;
    }

    body.page-community .floating-action-bar .btn-post span {
        font-size: 34px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Community Tabs wirklich getrennt statt verklebter Schalter */
    body.page-community .tabs-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        margin-bottom: 18px !important;
    }

    body.page-community .tab-button {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    body.page-community .tab-button.active {
        background: var(--accent-gradient) !important;
        border-color: rgba(255, 159, 67, 0.4) !important;
        color: #fff !important;
    }

    /* Marktplatz Owner/Admin-Aktionen oben rechts, ohne untere Buttons zu zerstören */
    body.page-marktplatz .match-card {
        position: relative !important;
        padding-top: 12px !important;
    }

    body.page-marktplatz .owner-actions-top {
        position: absolute !important;
        top: 9px !important;
        right: 9px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        z-index: 8 !important;
        max-width: calc(100% - 80px) !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    body.page-marktplatz .owner-action-btn {
        width: auto !important;
        min-width: 0 !important;
        min-height: 26px !important;
        height: 26px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        box-shadow: none !important;
        background: rgba(59, 130, 246, 0.10) !important;
        color: var(--info-color) !important;
        border: 1px solid rgba(59, 130, 246, 0.22) !important;
    }

    body.page-marktplatz .owner-action-btn.danger {
        background: rgba(239, 68, 68, 0.08) !important;
        color: var(--danger-color) !important;
        border-color: rgba(239, 68, 68, 0.24) !important;
    }

    body.page-marktplatz .owner-action-btn.success {
        background: rgba(52, 211, 153, 0.10) !important;
        color: var(--success-color) !important;
        border-color: rgba(52, 211, 153, 0.24) !important;
    }

    body.page-marktplatz .card-delete-top {
        display: none !important;
    }

    body.page-marktplatz .manage-actions {
        display: none !important;
    }

    /* auf Owner-Karten Titelbereich etwas Luft für Top-Actions */
    body.page-marktplatz .match-card:has(.owner-actions-top) .match-summary {
        padding-right: 0 !important;
    }
}

/* Fallback für Browser ohne :has – schadet nicht */
body.page-marktplatz .owner-actions-top + .match-card-main .match-summary {
    padding-right: 0 !important;
}

/* ==========================================================================
   PREMIUM POLISH v34 – weichere Typografie, Zahnrad-Menü, Karten-Finish
   ========================================================================== */

@media (max-width: 768px) {

    /* Schrift in Karten geschmeidiger, weniger "fett/aggressiv" */
    body h1,
    body h2,
    body h3,
    body h4,
    body .match-title,
    body .news-section-title,
    body .hero-section h2,
    body .planned-heading,
    body .page-section h2,
    body .panel-card h2 {
        font-weight: 760 !important;
        letter-spacing: -0.45px !important;
    }

    body p,
    body .match-meta,
    body .news-item-body,
    body .dash-desc,
    body .info-box,
    body .post-content,
    body .match-details p {
        font-weight: 500 !important;
        letter-spacing: -0.08px !important;
    }

    body label,
    body .form-group label,
    body .badge {
        font-weight: 720 !important;
    }

    /* Marktplatz: Zahnrad statt Edit/Delete/Mediated-Pills oben */
    body.page-marktplatz .owner-menu {
        position: absolute !important;
        top: 9px !important;
        right: 9px !important;
        z-index: 20 !important;
    }

    body.page-marktplatz .owner-menu-trigger {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        list-style: none !important;
        cursor: pointer !important;
        background: rgba(255, 159, 67, 0.12) !important;
        border: 1px solid rgba(255, 159, 67, 0.28) !important;
        color: var(--accent-color) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
        font-size: 16px !important;
    }

    body.page-marktplatz .owner-menu-trigger::-webkit-details-marker {
        display: none !important;
    }

    body.page-marktplatz .owner-menu[open] .owner-menu-trigger {
        background: var(--accent-gradient) !important;
        color: #fff !important;
    }

    body.page-marktplatz .owner-menu-popover {
        position: absolute !important;
        top: 38px !important;
        right: 0 !important;
        min-width: 138px !important;
        padding: 7px !important;
        border-radius: 14px !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18) !important;
        display: grid !important;
        gap: 6px !important;
    }

    body.page-marktplatz .owner-menu-popover button {
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        justify-content: flex-start !important;
        background: var(--input-bg) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: none !important;
    }

    body.page-marktplatz .owner-menu-popover button.danger {
        color: var(--danger-color) !important;
        background: rgba(239, 68, 68, 0.08) !important;
        border-color: rgba(239, 68, 68, 0.22) !important;
    }

    body.page-marktplatz .owner-actions-top,
    body.page-marktplatz .owner-action-btn,
    body.page-marktplatz .card-delete-top {
        display: none !important;
    }

    body.page-marktplatz .match-card:has(.owner-menu) .match-summary {
        padding-right: 38px !important;
    }

    body.page-marktplatz .action-buttons-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    body.page-marktplatz .action-buttons-group .btn-mediated {
        grid-column: 1 / -1 !important;
        background: rgba(52, 211, 153, 0.14) !important;
        color: var(--success-color) !important;
        border: 1px solid rgba(52, 211, 153, 0.28) !important;
    }

    /* Planer/Matches: Buttons wie die Marktplatz-Pills */
    body.page-mein-planer .match-item button,
    body.page-freie-matches .match-card a,
    body.page-freie-matches .match-card button,
    body.page-schiessbuch .btn-primary-auth,
    body.page-schiessbuch .btn-success {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 16px !important;
        border-radius: 13px !important;
        font-size: 13.5px !important;
        font-weight: 720 !important;
        box-shadow: 0 8px 18px rgba(59, 130, 246, 0.14) !important;
    }

    body.page-freie-matches .match-card a,
    body.page-freie-matches .match-card button,
    body.page-mein-planer .match-item button:first-of-type {
        background: linear-gradient(135deg, #4f83f1 0%, #2f65db 100%) !important;
        color: #fff !important;
        border: none !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
    }

    body.page-mein-planer .match-item .delete-btn,
    body.page-schiessbuch .delete-btn {
        background: rgba(239, 68, 68, 0.08) !important;
        color: var(--danger-color) !important;
        border: 1px solid rgba(239, 68, 68, 0.25) !important;
        box-shadow: none !important;
    }

    body.page-mein-planer .match-item {
        padding: 17px 15px !important;
        border-radius: 18px !important;
    }

    body.page-mein-planer .match-item h4 {
        font-size: 18px !important;
        line-height: 1.18 !important;
    }

    body.page-mein-planer .match-item p {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* Community Plus: Symbol erzwingen */
    body.page-community .floating-action-bar .btn-post::before {
        content: "+" !important;
        font-size: 34px !important;
        line-height: 1 !important;
        font-weight: 850 !important;
        color: #fff !important;
        display: block !important;
    }

    body.page-community .floating-action-bar .btn-post span {
        display: none !important;
    }

    /* Schießbuch / Modals: keine ausbrechenden Felder */
    body .modal-content,
    body .modal-content * {
        box-sizing: border-box !important;
    }

    body .modal-content {
        overflow-x: hidden !important;
    }

    body .modal-content form,
    body .modal-content .form-group {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body .modal-content [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body .modal-content input,
    body .modal-content select,
    body .modal-content textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-schiessbuch .page-section > div[style*="justify-content: space-between"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    body.page-schiessbuch .page-section > div[style*="justify-content: space-between"] > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    body.page-schiessbuch .page-section > div[style*="justify-content: space-between"] button {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* SG-Timer: Archiv-Tabs und Cards etwas ruhiger */
    body.page-sg-timer-live .panel-card h2 {
        font-size: 22px !important;
        line-height: 1.16 !important;
    }

    body.page-sg-timer-live .tab-navigation {
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
    }

    body.page-sg-timer-live .tab-btn {
        white-space: nowrap !important;
        font-size: 13px !important;
        min-height: 38px !important;
        border-radius: 13px !important;
    }
}

/* ==========================================================================
   APP READY POLISH v36 – Buttons, SG-Timer, Schießbuch-Date, Mobile Fit
   ========================================================================== */

@media (max-width: 768px) {

    /* Schrift nochmal etwas weicher in Content-Cards */
    body h1,
    body h2,
    body h3,
    body h4,
    body .match-title,
    body .panel-card h2,
    body .news-section-title {
        font-weight: 730 !important;
        letter-spacing: -0.55px !important;
    }

    body .badge,
    body label,
    body .form-group label {
        font-weight: 690 !important;
    }

    /* Planner: Inserieren-Button wie der schöne orange Marketplace-Stil */
    body.page-mein-planer .match-item button:first-of-type {
        background: var(--accent-gradient) !important;
        color: #fff !important;
        border: none !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 22px rgba(255, 128, 8, 0.24) !important;
        font-size: 14px !important;
        font-weight: 740 !important;
    }

    body.page-mein-planer .match-item .delete-btn {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
    }

    /* Matches: Link wirkt wie "zur Originalseite" statt klobiger Standardbutton */
    body.page-freie-matches .card-actions {
        border-top: 1px solid var(--border-color) !important;
        padding-top: 12px !important;
        margin-top: 12px !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    body.page-freie-matches .free-match-link-button {
        width: auto !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 15px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.06)) !important;
        color: #2f65db !important;
        border: 1px solid rgba(59,130,246,0.26) !important;
        box-shadow: 0 8px 18px rgba(59,130,246,0.10) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        font-size: 13px !important;
        font-weight: 740 !important;
        text-decoration: none !important;
    }

    html[data-theme="dark"] body.page-freie-matches .free-match-link-button {
        background: rgba(59,130,246,0.12) !important;
        color: #93c5fd !important;
        border-color: rgba(147,197,253,0.22) !important;
    }

    body.page-freie-matches .free-match-link-icon {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #4f83f1 0%, #2f65db 100%) !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1 !important;
        transform: rotate(-35deg) !important;
    }

    /* SG-Timer: Tabs dürfen nicht seitlich rauslaufen */
    body.page-sg-timer-live .main-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    body.page-sg-timer-live .tab-navigation {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        padding: 0 !important;
        margin: 14px 0 18px 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.page-sg-timer-live .tab-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 8px !important;
        border-radius: 16px !important;
        font-size: 12.5px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        justify-content: center !important;
    }

    body.page-sg-timer-live .panel-card {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.page-sg-timer-live .shot-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        font-size: 12px !important;
    }

    body.page-sg-timer-live .shot-table th,
    body.page-sg-timer-live .shot-table td {
        padding: 8px 5px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        word-break: break-word !important;
    }

    body.page-sg-timer-live #highscores .shot-table th:nth-child(1),
    body.page-sg-timer-live #highscores .shot-table td:nth-child(1) {
        width: 48px !important;
    }

    body.page-sg-timer-live #highscores .shot-table th:nth-child(2),
    body.page-sg-timer-live #highscores .shot-table td:nth-child(2) {
        width: 37% !important;
    }

    body.page-sg-timer-live #highscores .shot-table th:nth-child(3),
    body.page-sg-timer-live #highscores .shot-table td:nth-child(3) {
        width: 22% !important;
    }

    body.page-sg-timer-live #highscores .shot-table th:nth-child(4),
    body.page-sg-timer-live #highscores .shot-table td:nth-child(4) {
        width: 26% !important;
        text-align: right !important;
    }

    /* Schießbuch-Modal: Date-Feld auf iPhone sauber darstellen */
    body.page-schiessbuch .log-entry-modal .modal-content {
        width: calc(100vw - 28px) !important;
        max-width: 430px !important;
        max-height: calc(100dvh - 150px) !important;
        padding: 26px 20px 96px 20px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.page-schiessbuch #add-entry-form {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.page-schiessbuch #add-entry-form .form-group {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 14px !important;
    }

    body.page-schiessbuch #entry-date,
    body.page-schiessbuch input[type="date"].date-input-mobile {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-width: 100% !important;
        padding: 0 13px !important;
        text-align: left !important;
        justify-content: flex-start !important;
        font-size: 15px !important;
        line-height: 44px !important;
        appearance: auto !important;
        -webkit-appearance: none !important;
        background-color: var(--input-bg) !important;
    }

    body.page-schiessbuch #entry-date::-webkit-date-and-time-value {
        text-align: left !important;
        min-height: 44px !important;
        line-height: 44px !important;
    }

    body.page-schiessbuch #entry-date::-webkit-calendar-picker-indicator {
        margin-left: auto !important;
        opacity: .75 !important;
    }

    body.page-schiessbuch #add-entry-form button[type="submit"],
    body.page-schiessbuch #add-entry-form .btn-primary-auth {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        margin-top: 10px !important;
        border-radius: 15px !important;
    }
}

/* ==========================================================================
   MOBILE APP DOCK + PLANER COMPACT v37
   ========================================================================== */

@media (max-width: 768px) {

    /* Fallback: falls Header-JS-Style später nicht greift, trotzdem das echte Dock stylen */
    #bottom-tab-bar {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) translateZ(0) !important;
        width: calc(100% - 24px) !important;
        max-width: 520px !important;
        height: 72px !important;
        padding: 7px 8px !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        border-radius: 28px !important;
        border: 1px solid rgba(148, 163, 184, 0.24) !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.80)) !important;
        box-shadow: 0 18px 44px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.82) !important;
        backdrop-filter: blur(22px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
        z-index: 99990 !important;
        overflow: hidden !important;
    }

    html[data-theme="dark"] #bottom-tab-bar {
        background: linear-gradient(180deg, rgba(31,41,55,.90), rgba(15,23,42,.80)) !important;
        border-color: rgba(148,163,184,.18) !important;
        box-shadow: 0 18px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    #bottom-tab-bar .tab-item {
        width: auto !important;
        height: 58px !important;
        min-width: 0 !important;
        padding: 5px 2px 4px !important;
        border-radius: 22px !important;
        gap: 2px !important;
        position: relative !important;
    }

    #bottom-tab-bar .tab-item::before {
        content: "" !important;
        position: absolute !important;
        inset: 5px 6px !important;
        border-radius: 20px !important;
        opacity: 0 !important;
        transform: scale(.86) !important;
        z-index: -1 !important;
        transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1) !important;
    }

    #bottom-tab-bar .tab-item.active::before {
        opacity: 1 !important;
        transform: scale(1) !important;
        background: linear-gradient(135deg, rgba(255,159,67,.18), rgba(255,128,8,.09)) !important;
        box-shadow: inset 0 0 0 1px rgba(255,159,67,.15), 0 8px 20px rgba(255,159,67,.13) !important;
    }

    #bottom-tab-bar .tab-item:active,
    #bottom-tab-bar .tab-item.is-pressing {
        transform: scale(.92) !important;
    }

    body {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    /* Planer: "Match erstellen" im gleichen Premium-Orange-Look wie Marktplatz */
    body.page-mein-planer .planner-form-toggle {
        position: relative !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 90% 30%, rgba(255,159,67,0.22), transparent 34%),
            linear-gradient(135deg, rgba(255,159,67,0.16), rgba(255,128,8,0.07)) !important;
        border: 1px solid rgba(255,159,67,0.24) !important;
        box-shadow: 0 10px 26px rgba(255,128,8,0.10), var(--shadow-sm) !important;
    }

    body.page-mein-planer .planner-form-toggle-kicker {
        color: var(--accent-color) !important;
    }

    body.page-mein-planer .planner-form-toggle-icon {
        background: var(--accent-gradient) !important;
        color: #fff !important;
        box-shadow: 0 12px 26px rgba(255,128,8,0.26) !important;
    }

    /* Geplante Matches kompakter: Buttons nebeneinander */
    body.page-mein-planer .match-item {
        padding: 15px 14px !important;
        border-radius: 18px !important;
    }

    body.page-mein-planer .planner-card-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        align-items: stretch !important;
        margin-top: 14px !important;
        width: 100% !important;
    }

    body.page-mein-planer .planner-card-actions button,
    body.page-mein-planer .planner-insert-btn,
    body.page-mein-planer .planner-delete-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        border-radius: 14px !important;
        font-size: 13.5px !important;
        font-weight: 760 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    body.page-mein-planer .planner-insert-btn {
        background: var(--accent-gradient) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 10px 22px rgba(255,128,8,.24) !important;
    }

    body.page-mein-planer .planner-delete-btn {
        background: rgba(239, 68, 68, 0.07) !important;
        color: var(--danger-color) !important;
        border: 1px solid rgba(239, 68, 68, 0.24) !important;
        box-shadow: none !important;
    }

    body.page-mein-planer .match-item h4 {
        font-size: 17px !important;
        line-height: 1.18 !important;
        margin-bottom: 8px !important;
    }

    body.page-mein-planer .match-item p {
        font-size: 13.5px !important;
        line-height: 1.32 !important;
    }
}

/* ==========================================================================
   BROWSER / APP DOCK TUNING v38
   ========================================================================== */

@media (max-width: 768px) {

    html.is-browser-mode #bottom-tab-bar {
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: calc(100% - 30px) !important;
        height: 64px !important;
        padding: 6px 7px !important;
        border-radius: 24px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.70)) !important;
        box-shadow: 0 14px 34px rgba(15,23,42,.14), 0 1px 6px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.72) !important;
    }

    html[data-theme="dark"].is-browser-mode #bottom-tab-bar {
        background: linear-gradient(180deg, rgba(31,41,55,.82), rgba(15,23,42,.72)) !important;
        box-shadow: 0 16px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07) !important;
    }

    html.is-browser-mode #bottom-tab-bar .tab-item {
        height: 52px !important;
        border-radius: 19px !important;
    }

    html.is-browser-mode #bottom-tab-bar .tab-item::before {
        inset: 4px 5px !important;
        border-radius: 18px !important;
    }

    html.is-browser-mode #bottom-tab-bar .tab-item svg {
        width: 22px !important;
        height: 22px !important;
    }

    html.is-browser-mode #bottom-tab-bar .tab-item span {
        font-size: 10.8px !important;
        font-weight: 740 !important;
    }

    html.is-browser-mode body {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    html.is-browser-mode .container,
    html.is-browser-mode main,
    html.is-browser-mode .main-container {
        padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
    }

    html.is-standalone-app #bottom-tab-bar {
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        height: 72px !important;
        border-radius: 28px !important;
    }
}

/* ==========================================================================
   RELEASE CANDIDATE POLISH v39 – Settings, Community i18n, Desktop Finish
   ========================================================================== */

/* Modals müssen über der Bottom-Bar liegen, sonst wirkt das Einstellungsmenü kaputt */
.modal,
.modal-overlay,
#auth-modal {
    z-index: 100200 !important;
}

#bottom-tab-bar {
    z-index: 99990 !important;
}

/* Konto-Einstellungen: Button-/Kartenoptik glätten */
#modal-settings-view {
    --settings-soft-border: rgba(148, 163, 184, 0.22);
}

#modal-settings-view h3 {
    font-weight: 760 !important;
    letter-spacing: -0.45px !important;
}

#modal-settings-view .settings-stats-card,
#modal-settings-view .settings-passkey-card,
#modal-settings-view .settings-realname-card,
#modal-settings-view .settings-ipsc-card {
    border-radius: 18px !important;
    border: 1px solid var(--settings-soft-border) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}

#modal-settings-view .settings-passkey-card .btn-primary-auth,
#modal-settings-view button[onclick="registerPasskey()"] {
    width: 100% !important;
    max-width: 360px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 12px auto 0 auto !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 740 !important;
    background: linear-gradient(135deg, #4f83f1 0%, #2f65db 100%) !important;
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.18) !important;
}

#modal-settings-view #settings-form > button[type="submit"],
#modal-settings-view button[data-txt="btn-save"] {
    width: 100% !important;
    max-width: 360px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 18px auto 16px auto !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--accent-gradient) !important;
    box-shadow: 0 12px 26px rgba(255, 128, 8, 0.22) !important;
}

#modal-settings-view input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
}

#modal-settings-view #profile-preview {
    width: 104px !important;
    height: 104px !important;
    border-radius: 24px !important;
    object-fit: cover !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}

#modal-settings-view button[onclick*="deleteAccount"],
#modal-settings-view .btn-delete-account {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    font-weight: 760 !important;
}

/* Desktop: Planner-Erstellen-Karte genauso hochwertig/orange wie Marktplatz */
body.page-mein-planer .planner-form-toggle {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 92% 35%, rgba(255,159,67,0.20), transparent 34%),
        linear-gradient(135deg, rgba(255,159,67,0.16), rgba(255,128,8,0.07)) !important;
    border: 1px solid rgba(255,159,67,0.24) !important;
    box-shadow: 0 10px 26px rgba(255,128,8,0.10), var(--shadow-sm) !important;
    border-radius: 18px !important;
}

body.page-mein-planer .planner-form-toggle-kicker {
    color: var(--accent-color) !important;
}

body.page-mein-planer .planner-form-toggle-icon {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(255,128,8,0.26) !important;
}

/* Desktop: Schießbuch-Neuer-Eintrag Modal besser proportionieren */
body.page-schiessbuch .log-entry-modal .modal-content {
    width: min(92vw, 560px) !important;
    max-width: 560px !important;
    border-radius: 24px !important;
    padding: 34px 34px 30px 34px !important;
}

body.page-schiessbuch .log-entry-modal .modal-close-trigger {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--input-bg) !important;
    color: var(--text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

body.page-schiessbuch .log-entry-form {
    display: grid !important;
    gap: 14px !important;
}

body.page-schiessbuch .log-entry-two-col {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: 14px !important;
}

body.page-schiessbuch .log-entry-form input {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
}

body.page-schiessbuch .log-entry-form button[type="submit"] {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    margin-top: 6px !important;
    background: var(--accent-gradient) !important;
    box-shadow: 0 12px 26px rgba(255, 128, 8, 0.22) !important;
}

/* Mobile Settings: kompakter, aber scrollbar und nicht von Dock verdeckt */
@media (max-width: 768px) {
    #auth-modal .modal-content {
        max-height: calc(100dvh - 116px) !important;
        padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    }

    #modal-settings-view .settings-passkey-card .btn-primary-auth,
    #modal-settings-view button[onclick="registerPasskey()"],
    #modal-settings-view #settings-form > button[type="submit"],
    #modal-settings-view button[data-txt="btn-save"] {
        max-width: none !important;
    }

    #modal-settings-view .settings-stats-card,
    #modal-settings-view .settings-passkey-card,
    #modal-settings-view .settings-realname-card,
    #modal-settings-view .settings-ipsc-card {
        padding: 14px !important;
        border-radius: 18px !important;
        margin-bottom: 14px !important;
    }

    #modal-settings-view #profile-preview {
        width: 92px !important;
        height: 92px !important;
        border-radius: 22px !important;
    }

    body.page-schiessbuch .log-entry-modal .modal-content {
        width: calc(100vw - 28px) !important;
        max-width: 430px !important;
        padding: 26px 20px calc(110px + env(safe-area-inset-bottom)) 20px !important;
        max-height: calc(100dvh - 120px) !important;
    }

    body.page-schiessbuch .log-entry-two-col {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   HOTFIX v40 – Community, Chat, Settings-Passkey
   ========================================================================== */

/* Passkey Button im Einstellungsmenü: nicht mehr riesig/vollbreit */
#modal-settings-view button[onclick="registerPasskey()"],
#modal-settings-view .settings-passkey-card button,
#modal-settings-view .settings-passkey-card .btn-primary-auth {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 12px auto 0 auto !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    white-space: normal !important;
    text-align: center !important;
    background: linear-gradient(135deg, #4f83f1 0%, #2f65db 100%) !important;
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.16) !important;
}

#modal-settings-view .settings-passkey-card {
    text-align: left !important;
}

#modal-settings-view .settings-passkey-card button,
#modal-settings-view .settings-passkey-card .btn-primary-auth {
    align-self: center !important;
}

/* Chat-Modal: Eingabe/Senden auf Handy stabil nebeneinander */
#chat-modal {
    z-index: 100250 !important;
}

#chat-send-form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: stretch !important;
}

#chat-message-input {
    min-width: 0 !important;
    width: 100% !important;
}

#btn-chat-send {
    width: auto !important;
    min-width: 84px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
}

@media (max-width: 768px) {
    #modal-settings-view button[onclick="registerPasskey()"],
    #modal-settings-view .settings-passkey-card button,
    #modal-settings-view .settings-passkey-card .btn-primary-auth {
        width: fit-content !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 13px !important;
    }

    #chat-modal .modal-content {
        width: calc(100vw - 28px) !important;
        max-width: 460px !important;
        padding: 20px 16px calc(92px + env(safe-area-inset-bottom)) 16px !important;
    }

    #chat-send-form {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

/* ==========================================================================
   CHAT & NOTIFICATION POLISH v41
   ========================================================================== */

#chat-modal {
    z-index: 100300 !important;
}

#chat-modal .chat-modal-content {
    width: min(92vw, 520px) !important;
    max-width: 520px !important;
    padding: 22px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    gap: 10px !important;
}

#chat-modal .modal-close-container {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 3 !important;
}

#chat-modal .modal-close-trigger {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--input-bg) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
}

#chat-modal .chat-modal-header {
    padding-right: 46px !important;
}

#chat-modal .chat-kicker {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-bottom: 4px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 159, 67, 0.12) !important;
    color: var(--accent-color) !important;
    font-size: 11px !important;
    font-weight: 780 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

#chat-title-match {
    font-size: 23px !important;
    line-height: 1.12 !important;
    font-weight: 780 !important;
    letter-spacing: -0.55px !important;
    margin: 0 !important;
}

#chat-title-partner {
    margin: 0 0 8px 0 !important;
    padding: 8px 11px !important;
    border-radius: 14px !important;
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    word-break: break-all !important;
}

#chat-box-messages.chat-history-area,
#chat-box-messages {
    height: clamp(220px, 38dvh, 335px) !important;
    min-height: 220px !important;
    max-height: 335px !important;
    overflow-y: auto !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,159,67,0.055), transparent 45%),
        var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 24px rgba(15,23,42,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

html[data-theme="dark"] #chat-box-messages.chat-history-area,
html[data-theme="dark"] #chat-box-messages {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.18) !important;
}

.chat-empty-state {
    margin: auto !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    display: grid !important;
    gap: 5px !important;
    justify-items: center !important;
    max-width: 260px !important;
}

.chat-empty-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,159,67,0.12) !important;
    color: var(--accent-color) !important;
    font-size: 22px !important;
}

.chat-empty-state strong {
    color: var(--text-color) !important;
    font-size: 15px !important;
}

.chat-empty-state span {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.chat-bubble-container {
    max-width: 82% !important;
}

.chat-bubble {
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    border-radius: 18px !important;
}

.chat-bubble.bubble-me {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-radius: 18px 18px 5px 18px !important;
    box-shadow: 0 8px 18px rgba(255,128,8,0.16) !important;
}

.chat-bubble.bubble-other {
    background: #eef1f5 !important;
    color: #111827 !important;
    border: 1px solid rgba(148,163,184,0.16) !important;
    border-radius: 18px 18px 18px 5px !important;
}

html[data-theme="dark"] .chat-bubble.bubble-other {
    background: rgba(255,255,255,0.08) !important;
    color: #f9fafb !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.chat-bubble-meta {
    margin-top: 4px !important;
    gap: 8px !important;
    position: static !important;
    opacity: 0.75 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 4px !important;
}

.chat-action-link {
    font-size: 11px !important;
}

#chat-send-form {
    margin-top: 2px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 6px !important;
    border-radius: 18px !important;
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

#chat-message-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

#btn-chat-send {
    height: 42px !important;
    min-height: 42px !important;
    min-width: 86px !important;
    padding: 0 15px !important;
    border-radius: 14px !important;
    background: var(--accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(255,128,8,0.16) !important;
    font-size: 14px !important;
    font-weight: 760 !important;
}

#chat-toast-container {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 24px), 430px) !important;
    z-index: 100500 !important;
    display: grid !important;
    gap: 8px !important;
    pointer-events: none !important;
}

.chat-toast {
    pointer-events: auto !important;
    width: 100% !important;
    border: 1px solid rgba(148,163,184,0.22) !important;
    border-radius: 20px !important;
    padding: 10px 12px !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 16px 36px rgba(15,23,42,0.18) !important;
    backdrop-filter: blur(18px) saturate(1.45) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.45) !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
    text-align: left !important;
    animation: chatToastIn .22s ease-out !important;
}

html[data-theme="dark"] .chat-toast {
    background: rgba(31,41,55,0.92) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.38) !important;
}

.chat-toast.is-hiding {
    animation: chatToastOut .26s ease-in forwards !important;
}

.chat-toast-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,159,67,0.14) !important;
    color: var(--accent-color) !important;
    font-size: 18px !important;
}

.chat-toast-text {
    min-width: 0 !important;
    display: grid !important;
    gap: 1px !important;
}

.chat-toast-text strong {
    font-size: 13px !important;
    color: var(--text-color) !important;
}

.chat-toast-text small {
    font-size: 11px !important;
    color: var(--accent-color) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.chat-toast-text em {
    font-style: normal !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@keyframes chatToastIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chatToastOut {
    to { opacity: 0; transform: translateY(8px) scale(.98); }
}

@media (max-width: 768px) {
    #chat-modal .chat-modal-content {
        width: calc(100vw - 28px) !important;
        max-width: 440px !important;
        padding: 20px 16px 18px 16px !important;
        border-radius: 28px !important;
        max-height: calc(100dvh - 140px) !important;
    }

    #chat-title-match {
        font-size: 22px !important;
    }

    #chat-box-messages.chat-history-area,
    #chat-box-messages {
        height: clamp(220px, 34dvh, 305px) !important;
        max-height: 305px !important;
    }

    #chat-toast-container {
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }
}

/* ==========================================================================
   GOOGLE OAUTH READY v42
   ========================================================================== */

.btn-social-google,
.btn-social-apple {
    position: relative !important;
    overflow: hidden !important;
}

.btn-social-google.is-oauth-loading,
.btn-social-apple.is-oauth-loading {
    opacity: 0.78 !important;
    pointer-events: none !important;
    transform: scale(0.99) !important;
}

.btn-social-google span,
.btn-social-apple span {
    display: inline-flex !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .btn-social-google,
    .btn-social-apple {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        font-weight: 740 !important;
    }
}

/* ==========================================================================
   FINAL LOGIN MODAL CENTER FIX v43
   Ziel: Desktop wieder sauber wie v41, Mobile unverändert app-like
   ========================================================================== */

/* Login/Auth-Modal: Desktop exakt mittig, nicht oben versetzt */
#auth-modal.modal,
#auth-modal,
.auth-modal,
.modal.auth-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    overflow: hidden !important;
    background: rgba(8, 13, 27, 0.58) !important;
    backdrop-filter: blur(10px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
    z-index: 100250 !important;
}

/* Wenn JS das Modal öffnet */
#auth-modal.modal[style*="flex"],
#auth-modal[style*="flex"],
#auth-modal.is-open,
.auth-modal.is-open {
    display: flex !important;
}

/* Desktop-Karte: v41 Look, sauber zentriert */
#auth-modal .modal-content,
#auth-modal .auth-modal-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: min(92vw, 500px) !important;
    max-width: 500px !important;
    max-height: min(88dvh, 820px) !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
    padding: 28px 30px !important;
}

/* Verhindert, dass alte Generic-Modal-Regeln das Login-Fenster nach oben ziehen */
@media (min-width: 769px) {
    #auth-modal .modal-content {
        align-self: center !important;
        justify-self: center !important;
    }

    #auth-modal h3 {
        margin-top: 0 !important;
    }

    #auth-modal .modal-close-container,
    #auth-modal .modal-close-trigger {
        top: 16px !important;
        right: 16px !important;
    }
}

/* Mobile: bleibt v41/v42 artig, aber etwas mehr Safe-Area */
@media (max-width: 768px) {
    #auth-modal.modal,
    #auth-modal,
    .auth-modal,
    .modal.auth-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: max(14px, env(safe-area-inset-top)) 14px max(86px, env(safe-area-inset-bottom)) 14px !important;
        overflow: hidden !important;
    }

    #auth-modal .modal-content,
    #auth-modal .auth-modal-content {
        width: calc(100vw - 28px) !important;
        max-width: 430px !important;
        max-height: calc(100dvh - 132px) !important;
        padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) 20px !important;
        border-radius: 26px !important;
        margin: 0 auto !important;
    }
}

/* OAuth Buttons behalten v42-Funktion, aber v41-ruhiger */
#auth-modal .btn-social-google,
#auth-modal .btn-social-apple,
#auth-modal .btn-social-passkey {
    border-radius: 15px !important;
    min-height: 42px !important;
    font-weight: 760 !important;
}

#auth-modal .btn-social-google.is-oauth-loading,
#auth-modal .btn-social-apple.is-oauth-loading {
    opacity: .82 !important;
}

/* ==========================================================================
   HARD CENTER LOGIN MODAL v44
   Desktop: Karte exakt per Viewport-Mitte positionieren.
   Mobile bleibt unverändert app-like.
   ========================================================================== */

@media (min-width: 769px) {
    #auth-modal.modal,
    #auth-modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: rgba(8, 13, 27, 0.58) !important;
        backdrop-filter: blur(10px) saturate(1.15) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
        z-index: 100250 !important;
    }

    /* Unabhängig von alten flex/top-Regeln exakt in die Browser-Mitte setzen */
    #auth-modal .modal-content,
    #auth-modal .auth-modal-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: 500px !important;
        max-width: min(500px, calc(100vw - 48px)) !important;
        max-height: calc(100dvh - 64px) !important;
        overflow-y: auto !important;
        border-radius: 24px !important;
        padding: 28px 30px !important;
    }

    /* Falls irgendeine ältere Regel flex-start / margin-top erzwingt */
    #auth-modal[style*="display"] .modal-content,
    #auth-modal[style*="flex"] .modal-content {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* Kleine Laptops: minimal kompakter, aber weiterhin exakt zentriert */
@media (min-width: 769px) and (max-height: 760px) {
    #auth-modal .modal-content,
    #auth-modal .auth-modal-content {
        max-height: calc(100dvh - 40px) !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

/* ==========================================================================
   OAUTH CALLBACK HOTFIX v45
   ========================================================================== */

.btn-social-google.is-oauth-loading,
.btn-social-apple.is-oauth-loading {
    cursor: progress !important;
}

/* ==========================================================================
   DESKTOP LOGIN BUTTON ALIGNMENT v46
   Mobile bleibt unverändert, Desktop Social-/Login-Buttons sauber mittig.
   ========================================================================== */

@media (min-width: 769px) {
    #auth-modal #login-form,
    #auth-modal #modal-login-view,
    #auth-modal #modal-register-view,
    #auth-modal #modal-reset-view {
        width: 100% !important;
    }

    /* Passwort-Login und Schnell-Login Buttons nicht mehr links kleben lassen */
    #auth-modal #login-form button[type="submit"],
    #auth-modal #register-form button[type="submit"],
    #auth-modal #reset-form button[type="submit"],
    #auth-modal .btn-primary-auth,
    #auth-modal .btn-social-passkey,
    #auth-modal .btn-social-apple,
    #auth-modal .btn-social-google {
        width: min(100%, 290px) !important;
        max-width: 290px !important;
        min-height: 42px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #auth-modal #login-form button[type="submit"] {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
    }

    #auth-modal .btn-social-passkey,
    #auth-modal .btn-social-apple,
    #auth-modal .btn-social-google {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    #auth-modal .modal-footer {
        text-align: center !important;
    }
}

/* Mobile explizit nicht verschieben */
@media (max-width: 768px) {
    #auth-modal .btn-social-passkey,
    #auth-modal .btn-social-apple,
    #auth-modal .btn-social-google {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   OAUTH AUTO SESSION FIX v47
   Google/Apple Login läuft wieder über Supabase detectSessionInUrl.
   ========================================================================== */

/* ==========================================================================
   CHAT BADGE POSITION FIX v48
   Badge sitzt jetzt am Chat-Symbol, nicht neben/auf dem Logout-Bereich.
   ========================================================================== */

header #header-chat-btn,
header .header-chat-btn {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}

header #chat-badge-count {
    display: none;
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 18px !important;
    font-weight: 800 !important;
    text-align: center !important;
    box-shadow: 0 0 0 2px var(--card-bg), 0 8px 16px rgba(239,68,68,.28) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

header #header-chat-btn.has-chat-unread #chat-badge-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

header #auth-status-container #chat-badge-count,
header #btn-logout #chat-badge-count {
    display: none !important;
}

/* ==========================================================================
   NATIVE APP POLISH v49
   - Kein weißer Flash beim Seitenwechsel
   - App-Hintergrund durchgehend dunkel/hell
   - Header im App-Modus sticky
   ========================================================================== */

html,
body {
    min-height: 100%;
    background-color: var(--bg-color, #0f172a) !important;
    overscroll-behavior: none;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #0f172a !important;
}

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f6f8fc !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--bg-color, #0f172a);
}

html[data-theme="dark"] body::before {
    background:
        radial-gradient(circle at 50% -12%, rgba(255,159,67,0.08), transparent 34%),
        linear-gradient(180deg, #111827 0%, #0f172a 42%, #0b1120 100%);
}

html[data-theme="light"] body::before {
    background:
        radial-gradient(circle at 50% -12%, rgba(255,159,67,0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 45%, #eef2f7 100%);
}

/* Capacitor/WKWebView: verhindert weißes Blitzen beim Laden/Navigation */
body.is-app-shell,
html.is-standalone-app body {
    background-color: #0f172a !important;
}

html[data-theme="light"] body.is-app-shell,
html[data-theme="light"].is-standalone-app body {
    background-color: #f6f8fc !important;
}

/* App-Modus: Header oben sticky, damit die App nicht wie eine Webseite wirkt */
@media (max-width: 768px) {
    html.is-standalone-app #main-header,
    html.is-standalone-app header.site-header,
    body.is-app-shell #main-header,
    body.is-app-shell header.site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 99980 !important;
        background: var(--header-bg, var(--card-bg)) !important;
        backdrop-filter: blur(20px) saturate(1.35) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
        box-shadow: 0 1px 0 rgba(148,163,184,0.16), 0 12px 28px rgba(15,23,42,0.08) !important;
    }

    html[data-theme="dark"].is-standalone-app #main-header,
    html[data-theme="dark"].is-standalone-app header.site-header,
    html[data-theme="dark"] body.is-app-shell #main-header,
    html[data-theme="dark"] body.is-app-shell header.site-header {
        background: rgba(17,24,39,0.92) !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.22) !important;
    }
}

/* Link-Taps in der App fühlen sich etwas nativer an */
a,
button,
.tab-item {
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   APP PAGE SWITCH FLASH + BOTTOM DOCK v50
   - Kein weißer Blitz beim Seitenwechsel
   - Bottom-Dock etwas tiefer
   - Header nicht sticky erzwingen
   ========================================================================== */

/* Letzte Sicherheit gegen weißen WKWebView-/Browser-Hintergrund */
html,
body,
body.is-app-shell,
html.is-native-shell body,
html.is-standalone-app body {
    background-color: #0f172a !important;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] body.is-app-shell,
html[data-theme="light"].is-native-shell body,
html[data-theme="light"].is-standalone-app body {
    background-color: #f6f8fc !important;
}

/* Overlay wird direkt vor echter Navigation dunkel/hell eingeblendet */
#app-page-transition-cover {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: #0f172a !important;
    transition: opacity 70ms linear !important;
}

html[data-theme="light"] #app-page-transition-cover {
    background: #f6f8fc !important;
}

html.is-page-leaving #app-page-transition-cover {
    opacity: 1 !important;
}

/* Korrektur: Header im App-Modus nicht festkleben, nur normal oben im Content */
@media (max-width: 768px) {
    html.is-standalone-app #main-header,
    html.is-standalone-app header.site-header,
    body.is-app-shell #main-header,
    body.is-app-shell header.site-header {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
    }
}

/* Bottom-Dock in App/Xtools etwas tiefer setzen */
@media (max-width: 768px) {
    html.is-standalone-app #bottom-tab-bar,
    html.is-native-shell #bottom-tab-bar,
    body.is-app-shell #bottom-tab-bar {
        bottom: max(4px, calc(env(safe-area-inset-bottom) - 12px)) !important;
    }

    html.is-standalone-app body,
    html.is-native-shell body,
    body.is-app-shell {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    html.is-standalone-app .container,
    html.is-standalone-app main,
    html.is-standalone-app .main-container,
    html.is-native-shell .container,
    html.is-native-shell main,
    html.is-native-shell .main-container,
    body.is-app-shell .container,
    body.is-app-shell main,
    body.is-app-shell .main-container {
        padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }

    html.is-standalone-app #chat-toast-container,
    html.is-native-shell #chat-toast-container,
    body.is-app-shell #chat-toast-container {
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }
}


/* ========================================================================== 
   FINAL MOBILE UI FIX v51
   - Dock schließt unten sauber ab: App/Xtools und Safari-Browser
   - Übergangsfläche wirklich vorhanden + dunkler Hintergrund gegen weißen Flash
   - Doppel-AA Bot-Modal: kein horizontaler Overflow, kompakter, Checkboxen lesbar
   ========================================================================== */

html,
body {
    background-color: #0f172a !important;
}

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f6f8fc !important;
}

#app-page-transition-cover {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: #0f172a !important;
    transition: opacity 25ms linear !important;
    transform: translateZ(0) !important;
    will-change: opacity !important;
}

html[data-theme="light"] #app-page-transition-cover {
    background: #f6f8fc !important;
}

html.is-page-leaving #app-page-transition-cover {
    opacity: 1 !important;
}

html.is-native-shell,
html.is-standalone-app,
html.is-native-shell body,
html.is-standalone-app body,
body.is-app-shell {
    background: #0f172a !important;
}

html[data-theme="light"].is-native-shell,
html[data-theme="light"].is-standalone-app,
html[data-theme="light"].is-native-shell body,
html[data-theme="light"].is-standalone-app body,
html[data-theme="light"] body.is-app-shell {
    background: #f6f8fc !important;
}

@media (max-width: 768px) {
    html.is-native-shell #bottom-tab-bar,
    html.is-standalone-app #bottom-tab-bar,
    body.is-app-shell #bottom-tab-bar {
        bottom: 0px !important;
        width: calc(100% - 16px) !important;
        max-width: 520px !important;
        height: 72px !important;
        border-radius: 28px !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    html.is-browser-mode #bottom-tab-bar {
        bottom: 0px !important;
        width: calc(100% - 16px) !important;
        max-width: 520px !important;
        height: 64px !important;
        border-radius: 24px !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    html.is-native-shell body,
    html.is-standalone-app body,
    body.is-app-shell {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }

    html.is-native-shell .container,
    html.is-native-shell main,
    html.is-native-shell .main-container,
    html.is-standalone-app .container,
    html.is-standalone-app main,
    html.is-standalone-app .main-container,
    body.is-app-shell .container,
    body.is-app-shell main,
    body.is-app-shell .main-container {
        padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    }

    html.is-browser-mode body {
        padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
    }

    html.is-browser-mode .container,
    html.is-browser-mode main,
    html.is-browser-mode .main-container {
        padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    }

    html.is-native-shell .more-menu-content,
    html.is-standalone-app .more-menu-content,
    body.is-app-shell .more-menu-content {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    html.is-browser-mode .more-menu-content {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 768px) {
    body.page-doppel-aa .modal {
        padding: max(10px, env(safe-area-inset-top)) 12px calc(82px + env(safe-area-inset-bottom)) 12px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-x: hidden !important;
    }

    body.page-doppel-aa .modal-content {
        box-sizing: border-box !important;
        width: calc(100vw - 24px) !important;
        max-width: 470px !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 118px - env(safe-area-inset-bottom)) !important;
        padding: 20px 18px 22px 18px !important;
        border-radius: 24px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.page-doppel-aa #bot-submit-form,
    body.page-doppel-aa .form-row,
    body.page-doppel-aa .form-group,
    body.page-doppel-aa .checkbox-grid,
    body.page-doppel-aa .checkbox-group,
    body.page-doppel-aa .checkbox-group-terms {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.page-doppel-aa .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    body.page-doppel-aa .form-group {
        margin-bottom: 12px !important;
    }

    body.page-doppel-aa .form-group label,
    body.page-doppel-aa .checkbox-group label,
    body.page-doppel-aa .checkbox-group-terms label {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 1.25 !important;
    }

    body.page-doppel-aa .form-group label {
        font-size: 11.5px !important;
        letter-spacing: 0.06em !important;
        font-weight: 760 !important;
        margin-bottom: 6px !important;
    }

    body.page-doppel-aa .form-group input,
    body.page-doppel-aa .form-group select,
    body.page-doppel-aa input,
    body.page-doppel-aa select {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 9px 12px !important;
        font-size: 15px !important;
        border-radius: 16px !important;
    }

    body.page-doppel-aa .radio-container {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 6px 0 2px 0 !important;
    }

    body.page-doppel-aa .radio-label,
    body.page-doppel-aa .checkbox-grid .checkbox-group,
    body.page-doppel-aa .checkbox-group-terms {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 11px !important;
        min-width: 0 !important;
        text-align: left !important;
        font-size: 14px !important;
    }

    body.page-doppel-aa .radio-label input,
    body.page-doppel-aa .checkbox-grid .checkbox-group input,
    body.page-doppel-aa .checkbox-group-terms input {
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
    }

    body.page-doppel-aa .checkbox-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        margin-bottom: 14px !important;
        overflow: hidden !important;
    }

    body.page-doppel-aa .checkbox-grid .checkbox-group label,
    body.page-doppel-aa .checkbox-group-terms label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        color: var(--text-color) !important;
    }

    body.page-doppel-aa .btn-primary-auth,
    body.page-doppel-aa #bot-submit-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 16px !important;
        border-radius: 18px !important;
        font-size: 15px !important;
        font-weight: 820 !important;
        margin-top: 8px !important;
    }

    body.page-doppel-aa .modal-close-trigger {
        top: 14px !important;
        right: 14px !important;
        width: 34px !important;
        height: 34px !important;
    }

    body.page-doppel-aa #modal-match-name {
        max-width: calc(100% - 46px) !important;
        font-size: 20px !important;
        line-height: 1.15 !important;
    }
}


/* ==========================================================================
   FINAL THEME + MORE DOCK POLISH v52
   ========================================================================== */

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f6f8fc !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #0f172a !important;
}

@media (max-width: 768px) {
    #bottom-tab-bar {
        overflow: visible !important;
    }

    #bottom-tab-bar .tab-item.active,
    #bottom-tab-bar .tab-item.open {
        color: var(--accent-color) !important;
    }

    #btn-more-menu.active::before,
    #btn-more-menu.open::before {
        opacity: 1 !important;
        transform: scale(1) !important;
        background: linear-gradient(135deg, rgba(255,159,67,.20), rgba(255,128,8,.10)) !important;
        box-shadow: inset 0 0 0 1px rgba(255,159,67,.17), 0 8px 22px rgba(255,159,67,.14) !important;
    }

    #more-menu-overlay {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        width: calc(100% - 16px) !important;
        max-width: 520px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        z-index: 99988 !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transform: translate3d(-50%, 14px, 0) scale(.985) !important;
        transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1) !important;
    }

    #more-menu-overlay.show {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translate3d(-50%, 0, 0) scale(1) !important;
    }

    html.is-browser-mode #more-menu-overlay {
        bottom: 63px !important;
    }

    html.is-native-shell #more-menu-overlay,
    html.is-standalone-app #more-menu-overlay,
    body.is-app-shell #more-menu-overlay {
        bottom: 71px !important;
    }

    #more-menu-list.more-menu-content {
        position: static !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 26px 26px 18px 18px !important;
        border: 1px solid rgba(148,163,184,.24) !important;
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84)) !important;
        box-shadow: 0 -12px 34px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.70) !important;
        backdrop-filter: blur(24px) saturate(1.45) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.45) !important;
        max-height: min(58vh, 410px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html[data-theme="dark"] #more-menu-list.more-menu-content {
        background: linear-gradient(180deg, rgba(31,41,55,.96), rgba(15,23,42,.89)) !important;
        border-color: rgba(148,163,184,.20) !important;
        box-shadow: 0 -14px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    #more-menu-list a {
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 14px !important;
        border-radius: 17px !important;
        text-decoration: none !important;
        font-weight: 760 !important;
        color: var(--text-color) !important;
        background: rgba(255,255,255,.55) !important;
        border: 1px solid rgba(148,163,184,.22) !important;
    }

    html[data-theme="dark"] #more-menu-list a {
        background: rgba(15,23,42,.40) !important;
        border-color: rgba(148,163,184,.18) !important;
    }

    #more-menu-list a.active {
        color: #fff !important;
        background: var(--accent-gradient) !important;
        border-color: rgba(255,159,67,.44) !important;
        box-shadow: 0 10px 24px rgba(255,128,8,.22) !important;
    }
}


/* HIT FACTOR BATTLE + PERFORMANCE LOADER v53: page-specific CSS is in tools.html/performance.html */


/* HIT FACTOR MOBILE OVERFLOW GUARD v54 */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    body.page-tools .container,
    body.page-tools .tool-section {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}


/* HIT FACTOR SAVED NAMES + CLEAN PDF v55 */


/* SCHIESSBUCH HASH CHAIN v56 */


/* SCHIESSBUCH EXTERNAL CONFIRMATION v57 */





/* TRANSITION LIGHT FIX v65 */
html {
    background-color: #0f172a;
}
html[data-theme="light"] {
    background-color: #f6f8fc;
}
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #0f172a !important;
}


/* LIGHT THEME FLASH FIX v70
   Ein einheitlicher früher Hintergrund verhindert das dunkle/helle Flackern
   beim Seitenwechsel im iOS-WebView. */
html,
body {
    background-color: #f6f8fc !important;
}

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f6f8fc !important;
    color-scheme: light !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #0f172a !important;
    color-scheme: dark !important;
}

html:not([data-theme]),
html:not([data-theme]) body {
    background-color: #f6f8fc !important;
    color-scheme: light !important;
}

html.is-page-leaving #app-page-transition-cover {
    opacity: 1 !important;
}

html[data-theme="light"] #app-page-transition-cover {
    background: #f6f8fc !important;
}

html[data-theme="dark"] #app-page-transition-cover {
    background: #0f172a !important;
}

html.is-theme-switching-v70 *,
html.is-theme-switching-v70 *::before,
html.is-theme-switching-v70 *::after {
    transition: none !important;
    animation: none !important;
}


/* ========================================================================== 
   NATIVE APP POLISH v71
   Klarer, ruhiger, weniger HTML-Look. App-ähnliche Oberflächen mit festen
   Flächen, sauberem Rhythmus, reduzierten Schatten und orangefarbenen Akzenten.
   ========================================================================== */

:root,
html[data-theme="light"] {
    --bg-color: #f6f8fc;
    --card-bg: #ffffff;
    --surface-strong-v71: #ffffff;
    --surface-soft-v71: #f9fbff;
    --surface-muted-v71: #eef2f7;
    --text-color: #0f172a;
    --text-muted: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --input-bg: #f8fafc;
    --accent-color: #ff8a1f;
    --accent-gradient: linear-gradient(135deg, #ff9f43 0%, #ff6b00 100%);
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 18px 42px rgba(15, 23, 42, 0.10);
    --app-ring-v71: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

html[data-theme="dark"] {
    --bg-color: #0f172a;
    --card-bg: #111827;
    --surface-strong-v71: #111827;
    --surface-soft-v71: #152033;
    --surface-muted-v71: #1e293b;
    --text-color: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: rgba(148, 163, 184, 0.14);
    --input-bg: #0b1220;
    --accent-color: #ff9f43;
    --accent-gradient: linear-gradient(135deg, #ffb15c 0%, #ff7a1a 100%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.36);
    --app-ring-v71: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html,
body.app-v71 {
    background:
        radial-gradient(circle at top left, rgba(255, 159, 67, 0.08), transparent 32rem),
        linear-gradient(180deg, var(--bg-color), var(--bg-color)) !important;
    text-rendering: geometricPrecision;
}

html[data-theme="dark"] body.app-v71 {
    background:
        radial-gradient(circle at 10% -10%, rgba(255, 159, 67, 0.12), transparent 30rem),
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.08), transparent 28rem),
        #0f172a !important;
}

body.app-v71 .container {
    max-width: 1080px;
    margin-top: 24px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
}

@media (min-width: 900px) {
    body.app-v71 .container { margin-top: 32px; }
}

body.app-v71 header {
    background: rgba(246, 248, 252, 0.92) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
}

html[data-theme="dark"] body.app-v71 header {
    background: rgba(15, 23, 42, 0.86) !important;
    border-bottom-color: rgba(148, 163, 184, 0.12) !important;
}

body.app-v71 header h1 {
    letter-spacing: -0.65px !important;
    font-weight: 850 !important;
}

@media (max-width: 768px) {
    body.app-v71 header {
        padding-top: calc(env(safe-area-inset-top) + 10px) !important;
        padding-bottom: 10px !important;
    }
    body.app-v71 header h1 { font-size: 19px !important; line-height: 1.08 !important; }
}

body.app-v71 .hero-section,
body.app-v71 .news-section,
body.app-v71 .card,
body.app-v71 .form-card,
body.app-v71 .tool-section,
body.app-v71 .post-card,
body.app-v71 .dash-card,
body.app-v71 .planner-card,
body.app-v71 .market-card,
body.app-v71 .community-card,
body.app-v71 .modal-content,
body.app-v71 .settings-card,
body.app-v71 .profile-card {
    background: var(--surface-strong-v71) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    box-shadow: var(--shadow-sm), var(--app-ring-v71) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.app-v71 .card:hover,
body.app-v71 .dash-card:hover,
body.app-v71 .market-card:hover,
body.app-v71 .planner-card:hover,
body.app-v71 .tool-section:hover {
    box-shadow: var(--shadow-md), var(--app-ring-v71) !important;
    border-color: rgba(255, 159, 67, 0.22) !important;
}

@media (hover: hover) {
    body.app-v71 .dash-card:hover { transform: translateY(-2px) !important; }
}

body.page-index.app-v71 .app-home-hero-v71 {
    position: relative;
    overflow: hidden;
    text-align: left !important;
    padding: 30px 24px !important;
    background:
        linear-gradient(145deg, rgba(255, 159, 67, 0.12), rgba(255, 255, 255, 0.96) 42%, rgba(255, 255, 255, 1)) !important;
}

html[data-theme="dark"] body.page-index.app-v71 .app-home-hero-v71 {
    background:
        linear-gradient(145deg, rgba(255, 159, 67, 0.16), rgba(17, 24, 39, 0.96) 46%, rgba(17, 24, 39, 1)) !important;
}

body.page-index.app-v71 .app-home-hero-v71::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -54px;
    top: -54px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 159, 67, 0.22), transparent 68%);
    pointer-events: none;
}

body.page-index.app-v71 .hero-kicker-v71 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 159, 67, 0.12);
    color: #b45309;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
}

html[data-theme="dark"] body.page-index.app-v71 .hero-kicker-v71 {
    color: #fed7aa;
    background: rgba(255, 159, 67, 0.14);
}

body.page-index.app-v71 .hero-status-dot-v71 {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(255, 159, 67, 0.16);
}

body.page-index.app-v71 .hero-section h2 {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 0.98 !important;
    letter-spacing: -1.8px !important;
    max-width: 680px;
    margin-bottom: 14px !important;
}

body.page-index.app-v71 .hero-section p {
    max-width: 680px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

body.page-index.app-v71 .hero-actions-v71 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

body.page-index.app-v71 .app-cta-v71 {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border-radius: 16px;
    font-weight: 850;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body.page-index.app-v71 .app-cta-primary-v71 {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 12px 24px rgba(255, 128, 8, 0.22);
}

body.page-index.app-v71 .app-cta-secondary-v71 {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] body.page-index.app-v71 .app-cta-secondary-v71 { background: rgba(255, 255, 255, 0.06); }
body.page-index.app-v71 .app-cta-v71:active { transform: scale(0.98); }

body.page-index.app-v71 .hero-metrics-v71 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

body.page-index.app-v71 .hero-metrics-v71 > div {
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

html[data-theme="dark"] body.page-index.app-v71 .hero-metrics-v71 > div {
    background: rgba(15, 23, 42, 0.42);
    border-color: rgba(148, 163, 184, 0.12);
}

body.page-index.app-v71 .hero-metrics-v71 strong {
    display: block;
    font-size: 13px;
    color: var(--text-color);
    letter-spacing: -0.2px;
}

body.page-index.app-v71 .hero-metrics-v71 span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.25;
}

body.page-index.app-v71 .app-section-heading-v71 {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 8px 0 16px;
}

body.page-index.app-v71 .app-section-heading-v71 span {
    display: block;
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

body.page-index.app-v71 .app-section-heading-v71 h3 {
    margin: 5px 0 0;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.05;
    letter-spacing: -0.8px;
    color: var(--text-color);
}

body.page-index.app-v71 .app-section-heading-v71 p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

body.page-index.app-v71 .dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 44px !important;
}

body.page-index.app-v71 .dash-card {
    padding: 20px !important;
    gap: 14px !important;
    border-radius: 22px !important;
    min-height: 158px;
}

body.page-index.app-v71 .dash-card-header { gap: 12px !important; }
body.page-index.app-v71 .dash-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, rgba(255, 159, 67, 0.14), rgba(255, 159, 67, 0.05)) !important;
    border: 1px solid rgba(255, 159, 67, 0.18) !important;
    box-shadow: none !important;
}
body.page-index.app-v71 .dash-title { font-size: 17px !important; letter-spacing: -0.35px; }
body.page-index.app-v71 .dash-desc { font-size: 13.5px !important; line-height: 1.48 !important; }
body.page-index.app-v71 .dash-action { font-size: 13.5px !important; font-weight: 850 !important; }

body.page-index.app-v71 .news-section { padding: 22px !important; }
body.page-index.app-v71 .news-section-title {
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 18px !important;
    letter-spacing: -0.35px;
}
body.page-index.app-v71 .news-item { border-left-width: 2px !important; padding-left: 15px !important; }

body.app-v71 button,
body.app-v71 .btn-submit,
body.app-v71 .btn-primary-auth,
body.app-v71 .btn-post,
body.app-v71 .btn-secondary-auth,
body.app-v71 .btn-contact,
body.app-v71 .btn-danger-block {
    border-radius: 16px !important;
    font-weight: 820 !important;
    letter-spacing: -0.1px;
    box-shadow: none !important;
}

body.app-v71 .btn-submit,
body.app-v71 .btn-primary-auth,
body.app-v71 .btn-post {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 10px 22px rgba(255, 128, 8, 0.20) !important;
}

body.app-v71 .btn-submit:hover,
body.app-v71 .btn-primary-auth:hover,
body.app-v71 .btn-post:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(255, 128, 8, 0.24) !important;
}

body.app-v71 input,
body.app-v71 textarea,
body.app-v71 select,
body.app-v71 .form-group input,
body.app-v71 .form-group textarea,
body.app-v71 .form-group select,
body.app-v71 .modal-content input,
body.app-v71 .modal-content textarea,
body.app-v71 .modal-content select {
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--input-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

html[data-theme="dark"] body.app-v71 input,
html[data-theme="dark"] body.app-v71 textarea,
html[data-theme="dark"] body.app-v71 select,
html[data-theme="dark"] body.app-v71 .form-group input,
html[data-theme="dark"] body.app-v71 .form-group textarea,
html[data-theme="dark"] body.app-v71 .form-group select,
html[data-theme="dark"] body.app-v71 .modal-content input,
html[data-theme="dark"] body.app-v71 .modal-content textarea,
html[data-theme="dark"] body.app-v71 .modal-content select {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.app-v71 input:focus,
body.app-v71 textarea:focus,
body.app-v71 select:focus,
body.app-v71 .form-group input:focus,
body.app-v71 .form-group textarea:focus,
body.app-v71 .form-group select:focus,
body.app-v71 .modal-content input:focus,
body.app-v71 .modal-content textarea:focus,
body.app-v71 .modal-content select:focus {
    border-color: rgba(255, 159, 67, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(255, 159, 67, 0.12) !important;
    outline: none !important;
}

body.app-v71 label,
body.app-v71 .form-group label,
body.app-v71 .hit-input-group label {
    font-size: 12px !important;
    font-weight: 850 !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.04em !important;
}

body.app-v71 #auth-modal .modal-content {
    border-radius: 28px !important;
    padding: 24px !important;
}
body.app-v71 #auth-modal .modal-content::before { opacity: 0.9; }
body.app-v71 #auth-modal .btn-social-passkey,
body.app-v71 #auth-modal .btn-social-apple,
body.app-v71 #auth-modal .btn-social-google {
    border-radius: 16px !important;
    background: var(--surface-soft-v71) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
body.app-v71 #auth-modal .btn-social-apple { background: #0f172a !important; color: #fff !important; }
html[data-theme="dark"] body.app-v71 #auth-modal .btn-social-apple { background: #f8fafc !important; color: #0f172a !important; }

body.app-v71 #bottom-tab-bar,
body.app-v71 .bottom-tab-bar {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.09) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
}
html[data-theme="dark"] body.app-v71 #bottom-tab-bar,
html[data-theme="dark"] body.app-v71 .bottom-tab-bar {
    background: rgba(15, 23, 42, 0.90) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42) !important;
}
body.app-v71 #bottom-tab-bar .tab-item,
body.app-v71 .bottom-tab-bar .tab-item {
    border-radius: 18px !important;
    color: var(--text-muted) !important;
}
body.app-v71 #bottom-tab-bar .tab-item.active,
body.app-v71 .bottom-tab-bar .tab-item.active { color: var(--text-color) !important; }
body.app-v71 #bottom-tab-bar .tab-item.active::before,
body.app-v71 .bottom-tab-bar .tab-item.active::before {
    background: rgba(255, 159, 67, 0.16) !important;
    border: 1px solid rgba(255, 159, 67, 0.22) !important;
    box-shadow: none !important;
}

body.app-v71 .list-item,
body.app-v71 .news-item,
body.app-v71 .planner-entry,
body.app-v71 .log-entry,
body.app-v71 .market-entry { border-radius: 18px; }
body.app-v71 hr,
body.app-v71 .section-divider { border-color: var(--border-color) !important; opacity: 0.75; }

@media (max-width: 768px) {
    body.app-v71 .container {
        margin-top: 18px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }
    body.app-v71 .hero-section,
    body.app-v71 .news-section,
    body.app-v71 .card,
    body.app-v71 .form-card,
    body.app-v71 .tool-section,
    body.app-v71 .post-card,
    body.app-v71 .dash-card,
    body.app-v71 .planner-card,
    body.app-v71 .market-card,
    body.app-v71 .modal-content {
        border-radius: 22px !important;
        padding: 18px !important;
        margin-bottom: 16px !important;
    }
    body.page-index.app-v71 .app-home-hero-v71 { padding: 22px 18px !important; }
    body.page-index.app-v71 .hero-section h2 { font-size: 38px !important; letter-spacing: -1.4px !important; }
    body.page-index.app-v71 .hero-actions-v71 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }
    body.page-index.app-v71 .app-cta-v71 { min-height: 44px; padding: 0 12px; font-size: 13.5px; }
    body.page-index.app-v71 .hero-metrics-v71 { grid-template-columns: 1fr; gap: 8px; }
    body.page-index.app-v71 .hero-metrics-v71 > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 13px;
    }
    body.page-index.app-v71 .hero-metrics-v71 span { text-align: right; margin-top: 0; }
    body.page-index.app-v71 .app-section-heading-v71 { align-items: flex-start; flex-direction: column; gap: 4px; margin-top: 4px; }
    body.page-index.app-v71 .dashboard-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    body.page-index.app-v71 .dash-card { min-height: 0; padding: 18px !important; }
    body.page-index.app-v71 .dash-desc { font-size: 13.5px !important; }
    body.app-v71 #auth-modal .modal-content { border-radius: 30px 30px 0 0 !important; }
}




/* ==========================================================================
   NATIVE EXPERIENCE POLISH v72
   Jede Seite bekommt App-Feeling: Page-Heros, Feed-Design, native Navigation,
   bessere Press States, konsistente Flächen und deutlich weniger HTML-Optik.
   ========================================================================== */

body.app-v72 {
    -webkit-font-smoothing: antialiased;
    font-synthesis-weight: none;
}

body.app-v72 .container {
    animation: app-page-in-v72 155ms ease-out both;
}

@keyframes app-page-in-v72 {
    from { opacity: 0.985; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

body.app-v72 .is-pressed-v72 {
    transform: scale(0.985) !important;
    transition: transform 100ms ease !important;
}

/* Page Hero across the app */
body.app-v72 .app-page-hero-v72 {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 159, 67, 0.16), transparent 22rem),
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,255,255,0.88));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm), var(--app-ring-v71);
}

html[data-theme="dark"] body.app-v72 .app-page-hero-v72 {
    background:
        radial-gradient(circle at top right, rgba(255, 159, 67, 0.17), transparent 22rem),
        linear-gradient(145deg, rgba(17,24,39,0.98), rgba(15,23,42,0.88));
}

body.app-v72 .app-page-kicker-v72 {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 159, 67, 0.12);
    color: #b45309;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

html[data-theme="dark"] body.app-v72 .app-page-kicker-v72 {
    color: #fed7aa;
    background: rgba(255, 159, 67, 0.14);
}

body.app-v72 .app-page-kicker-v72 span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(255,159,67,.15);
}

body.app-v72 .app-page-hero-v72 h2 {
    margin: 0;
    font-size: clamp(30px, 7vw, 46px);
    line-height: 1;
    letter-spacing: -1.35px;
    color: var(--text-color);
}

body.app-v72 .app-page-hero-v72 p {
    max-width: 660px;
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.55;
}

body.app-v72 .app-page-actions-v72 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.app-v72 .app-page-action-v72 {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 16px;
    font-weight: 850;
    font-size: 13.5px;
    text-decoration: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    background: rgba(255,255,255,.54);
}

html[data-theme="dark"] body.app-v72 .app-page-action-v72 {
    background: rgba(255,255,255,.055);
}

body.app-v72 .app-page-action-v72.primary {
    background: var(--accent-gradient);
    color: white;
    border: none;
    box-shadow: 0 12px 24px rgba(255, 128, 8, .20);
}

body.app-v72 .app-page-metrics-v72 {
    display: grid;
    gap: 10px;
    align-content: center;
}

body.app-v72 .app-page-metrics-v72 div {
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(15,23,42,.065);
}

html[data-theme="dark"] body.app-v72 .app-page-metrics-v72 div {
    background: rgba(15,23,42,.38);
    border-color: rgba(148,163,184,.13);
}

body.app-v72 .app-page-metrics-v72 strong {
    display: block;
    font-size: 14px;
    letter-spacing: -.25px;
    color: var(--text-color);
}

body.app-v72 .app-page-metrics-v72 span {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* App sections and state cards */
body.app-v72 .info-box,
body.app-v72 .danger-box,
body.app-v72 #logged-out-msg,
body.app-v72 #username-setup-section,
body.app-v72 .integrity-info-box,
body.app-v72 .filter-container,
body.app-v72 .tabs-container {
    border-radius: 22px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--surface-strong-v71) !important;
    box-shadow: var(--shadow-sm), var(--app-ring-v71) !important;
}

body.app-v72 .info-box,
body.app-v72 .integrity-info-box {
    border-left: 4px solid var(--accent-color) !important;
}

body.app-v72 .tabs-container {
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px !important;
}

body.app-v72 .tab-button {
    border-radius: 16px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    font-weight: 850 !important;
    min-height: 42px;
}

body.app-v72 .tab-button.active {
    background: rgba(255,159,67,.14) !important;
    color: var(--text-color) !important;
}

/* Community v72 */
body.page-community.app-v72 .tabs-container {
    margin-bottom: 14px;
}

body.page-community.app-v72 .community-composer-v72 {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 24px;
    background: var(--surface-strong-v71);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm), var(--app-ring-v71);
    cursor: pointer;
}

body.page-community.app-v72 .community-composer-avatar-v72 {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255,159,67,.14);
    color: var(--accent-color);
    font-size: 26px;
    font-weight: 800;
}

body.page-community.app-v72 .community-composer-text-v72 strong {
    display: block;
    color: var(--text-color);
    font-size: 15px;
    letter-spacing: -.2px;
}

body.page-community.app-v72 .community-composer-text-v72 span {
    display: block;
    color: var(--text-muted);
    font-size: 12.8px;
    margin-top: 2px;
}

body.page-community.app-v72 .community-composer-v72 button {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 14px !important;
    border: none !important;
    background: var(--accent-gradient) !important;
    color: white !important;
    font-weight: 850 !important;
}

body.page-community.app-v72 .community-filter-row-v72 {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 12px;
    margin-bottom: 2px;
    scrollbar-width: none;
}

body.page-community.app-v72 .community-filter-row-v72::-webkit-scrollbar {
    display: none;
}

body.page-community.app-v72 .community-filter-row-v72 span {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--surface-strong-v71);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 820;
}

body.page-community.app-v72 .community-filter-row-v72 span.active {
    background: rgba(255,159,67,.15);
    color: var(--text-color);
    border-color: rgba(255,159,67,.25);
}

body.page-community.app-v72 #posts-container {
    display: grid;
    gap: 12px;
}

body.page-community.app-v72 .post-card {
    position: relative;
    padding: 17px !important;
    border-radius: 24px !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

body.page-community.app-v72 .post-card.admin-post {
    border-color: rgba(255,159,67,.35) !important;
}

body.page-community.app-v72 .post-header {
    align-items: center;
    margin-bottom: 13px !important;
}

body.page-community.app-v72 .avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: var(--accent-gradient) !important;
    box-shadow: none !important;
    color: white !important;
    font-weight: 900 !important;
}

body.page-community.app-v72 .post-meta h4 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    margin: 0 0 2px !important;
    letter-spacing: -.25px;
}

body.page-community.app-v72 .post-meta span {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

body.page-community.app-v72 .badge-admin {
    border-radius: 999px !important;
    padding: 4px 8px !important;
    background: rgba(255,159,67,.14) !important;
    color: var(--accent-color) !important;
    font-size: 10px !important;
    margin-left: 6px;
}

body.page-community.app-v72 .post-content {
    font-size: 15.2px !important;
    line-height: 1.55 !important;
    color: var(--text-color) !important;
    margin-top: 6px !important;
    white-space: pre-wrap;
}

body.page-community.app-v72 .post-topic-v72 {
    display: inline-flex;
    margin-top: 12px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(59,130,246,.09);
    color: var(--info-color);
    font-size: 11.5px;
    font-weight: 850;
}

body.page-community.app-v72 .post-actions-bar {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--border-color) !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center;
    flex-wrap: wrap;
}

body.page-community.app-v72 .action-trigger {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--surface-soft-v71);
    border: 1px solid var(--border-color);
    font-size: 12.5px !important;
    font-weight: 780 !important;
    cursor: pointer;
}

body.page-community.app-v72 .comments-wrapper {
    margin-top: 12px !important;
    border-radius: 18px !important;
    background: var(--surface-soft-v71) !important;
    border: 1px solid var(--border-color) !important;
    padding: 12px !important;
}

body.page-community.app-v72 .comment-input-box {
    gap: 8px !important;
}

body.page-community.app-v72 .comment-input-box input {
    min-height: 40px !important;
}

body.page-community.app-v72 .comment-input-box button {
    min-height: 40px !important;
    border-radius: 14px !important;
    background: var(--accent-gradient) !important;
    color: white !important;
}

body.page-community.app-v72 .floating-action-bar {
    display: none !important;
}

body.page-community.app-v72 #post-modal .modal-content {
    max-width: 560px !important;
}

body.page-community.app-v72 #post-content {
    min-height: 140px !important;
    border-radius: 20px !important;
}

/* Empty states */
body.app-v72 .empty-state-v72 {
    text-align: center;
    padding: 34px 20px;
    border-radius: 24px;
    background: var(--surface-strong-v71);
    border: 1px dashed rgba(255,159,67,.28);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
}

body.app-v72 .empty-state-v72 .empty-icon-v72 {
    width: 54px;
    height: 54px;
    margin: 0 auto 13px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255,159,67,.13);
    font-size: 25px;
}

body.app-v72 .empty-state-v72 strong {
    display: block;
    color: var(--text-color);
    font-size: 18px;
    margin-bottom: 6px;
}

body.app-v72 .empty-state-v72 p {
    margin: 0 auto 16px;
    max-width: 420px;
    line-height: 1.45;
}

/* Marketplace / planner refinement */
body.app-v72 .market-form-accordion,
body.app-v72 .planner-form-accordion {
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm), var(--app-ring-v71);
}

body.app-v72 .market-form-toggle,
body.app-v72 .planner-form-toggle {
    border-radius: 24px !important;
    background: var(--surface-strong-v71) !important;
    border: 1px solid var(--border-color) !important;
}

body.app-v72 .market-form-toggle-icon,
body.app-v72 .planner-form-toggle-icon {
    border-radius: 14px !important;
    background: rgba(255,159,67,.14) !important;
    color: var(--accent-color) !important;
}

body.app-v72 .match-list,
body.app-v72 .list-container,
body.app-v72 #planned-matches-list,
body.app-v72 #js-match-container {
    display: grid;
    gap: 12px;
}

/* Tool / logbook pages */
body.page-schiessbuch.app-v72 .integrity-info-box {
    font-size: 14px !important;
    line-height: 1.48;
}

body.page-tools.app-v72 .hf-stage-toolbar,
body.page-performance.app-v72 .filter-container,
body.page-freie-matches.app-v72 .filter-container {
    border-radius: 22px !important;
    padding: 10px !important;
    background: var(--surface-strong-v71) !important;
    border: 1px solid var(--border-color) !important;
}

/* Page transition curtain */
#native-page-curtain-v72 {
    background: #f6f8fc;
}

html[data-theme="dark"] #native-page-curtain-v72 {
    background: #0f172a;
}

html.is-native-navigating-v72 body.app-v72 .container {
    animation: none !important;
}

@media (max-width: 768px) {
    body.app-v72 .app-page-hero-v72 {
        grid-template-columns: 1fr;
        padding: 20px 18px;
        margin-bottom: 14px;
        border-radius: 26px;
    }

    body.app-v72 .app-page-hero-v72 h2 {
        font-size: 36px;
        letter-spacing: -1.25px;
    }

    body.app-v72 .app-page-hero-v72 p {
        font-size: 14.5px;
    }

    body.app-v72 .app-page-actions-v72 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.app-v72 .app-page-action-v72 {
        min-height: 42px;
        padding: 0 10px;
        font-size: 13px;
    }

    body.app-v72 .app-page-metrics-v72 {
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }

    body.app-v72 .app-page-metrics-v72 div {
        padding: 10px 8px;
        border-radius: 16px;
        text-align: center;
    }

    body.app-v72 .app-page-metrics-v72 strong {
        font-size: 12.5px;
    }

    body.app-v72 .app-page-metrics-v72 span {
        font-size: 10.8px;
    }

    body.page-community.app-v72 .community-composer-v72 {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    body.page-community.app-v72 .community-composer-v72 button {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.page-community.app-v72 .post-card {
        padding: 15px !important;
    }

    body.page-community.app-v72 .action-trigger {
        flex: 1 1 auto;
        justify-content: center;
    }

    body.page-community.app-v72 #post-modal .modal-content {
        border-radius: 30px 30px 0 0 !important;
    }
}


/* ==========================================================================
   FINAL WEB + NATIVE POLISH v73
   Fix: keine sichtbare Roh-CSS-Zeile mehr auf der Website.
   Feinschliff: Desktop und App teilen denselben Premium-Look.
   ========================================================================== */

body.app-v73 {
    min-height: 100vh;
}

body.app-v73::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 159, 67, 0.075), transparent 34rem),
        radial-gradient(circle at 96% 8%, rgba(59, 130, 246, 0.045), transparent 30rem);
}

html[data-theme="dark"] body.app-v73::before {
    background:
        radial-gradient(circle at 10% -10%, rgba(255, 159, 67, 0.12), transparent 32rem),
        radial-gradient(circle at 96% 4%, rgba(59, 130, 246, 0.08), transparent 32rem);
}

/* Website/Desktop darf breiter und hochwertiger wirken */
@media (min-width: 1024px) {
    body.app-v73 .container {
        max-width: 1220px !important;
        margin-top: 34px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    body.app-v73 .app-page-hero-v72 {
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
        padding: 30px 32px !important;
        border-radius: 30px !important;
    }

    body.page-index.app-v73 .app-home-hero-v71 {
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
        padding: 34px 34px !important;
        border-radius: 30px !important;
    }

    body.page-index.app-v73 .dashboard-grid,
    body.app-v73 .dashboard-grid {
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
    }

    body.app-v73 .news-section,
    body.app-v73 .form-card,
    body.app-v73 .tool-section,
    body.app-v73 .tabs-container,
    body.app-v73 .filter-container,
    body.app-v73 #analytics-content,
    body.app-v73 #posts-container,
    body.app-v73 .community-composer-v72,
    body.app-v73 .community-filter-row-v72 {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Top navigation auf Website ruhiger und weniger HTML */
@media (min-width: 769px) {
    body.app-v73 header {
        position: sticky !important;
        top: 0;
        z-index: 1000;
    }

    body.app-v73 nav {
        justify-content: center !important;
        gap: 8px !important;
        padding: 9px 14px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.app-v73 nav::-webkit-scrollbar {
        display: none;
    }

    body.app-v73 nav a {
        border-radius: 999px !important;
        min-height: 34px;
        padding: 0 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        letter-spacing: -0.05px !important;
        border: 1px solid transparent !important;
    }

    body.app-v73 nav a:hover {
        background: rgba(255, 159, 67, 0.10) !important;
        border-color: rgba(255, 159, 67, 0.16) !important;
    }

    body.app-v73 nav a.active {
        background: var(--accent-gradient) !important;
        color: white !important;
        box-shadow: 0 8px 18px rgba(255, 128, 8, 0.18) !important;
    }
}

/* Kompaktere, kristallklarere Schrift */
body.app-v73 h1,
body.app-v73 h2,
body.app-v73 h3,
body.app-v73 h4 {
    text-wrap: balance;
}

body.app-v73 p {
    text-wrap: pretty;
}

/* Page Heroes noch etwas premium/nativer */
body.app-v73 .app-page-hero-v72,
body.app-v73 .app-home-hero-v71 {
    box-shadow:
        0 1px 0 rgba(255,255,255,.72) inset,
        0 16px 42px rgba(15, 23, 42, 0.055),
        var(--app-ring-v71) !important;
}

html[data-theme="dark"] body.app-v73 .app-page-hero-v72,
html[data-theme="dark"] body.app-v73 .app-home-hero-v71 {
    box-shadow:
        0 1px 0 rgba(255,255,255,.045) inset,
        0 18px 48px rgba(0, 0, 0, 0.26),
        var(--app-ring-v71) !important;
}

/* Community nochmal klarer */
body.page-community.app-v73 .post-card {
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

body.page-community.app-v73 .post-card:hover {
    border-color: rgba(255, 159, 67, 0.22) !important;
    box-shadow: var(--shadow-md), var(--app-ring-v71) !important;
}

body.page-community.app-v73 .community-composer-v72 {
    position: sticky;
    top: 92px;
    z-index: 12;
}

@media (max-width: 768px) {
    body.page-community.app-v73 .community-composer-v72 {
        position: relative;
        top: auto;
    }
}

/* Analytics/Desktop wirkt weniger verloren */
body.page-analytics.app-v73 .app-page-hero-v72 + * {
    margin-top: 16px;
}

body.page-analytics.app-v73 .tool-section,
body.page-analytics.app-v73 .card {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* Keine alten v72 Curtains anzeigen */
#native-page-curtain-v72 {
    display: none !important;
}

/* Neuer Curtain */
#native-page-curtain-v73 {
    background: #f6f8fc;
}

html[data-theme="dark"] #native-page-curtain-v73 {
    background: #0f172a;
}

html.is-native-navigating-v73 body.app-v73 .container {
    animation: none !important;
}

/* Mobile: mehr App, weniger Webseite */
@media (max-width: 768px) {
    body.app-v73 .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body.app-v73 .app-page-hero-v72 {
        box-shadow: var(--shadow-sm), var(--app-ring-v71) !important;
    }

    body.app-v73 .app-page-kicker-v72 {
        height: 28px;
        font-size: 10.8px;
        padding: 0 10px;
    }
}

/* Accessibility and clarity */
body.app-v73 * {
    -webkit-tap-highlight-color: transparent;
}

body.app-v73 a:focus-visible,
body.app-v73 button:focus-visible,
body.app-v73 input:focus-visible,
body.app-v73 textarea:focus-visible,
body.app-v73 select:focus-visible {
    outline: 3px solid rgba(255,159,67,.34) !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   NATIVE LOGIC POLISH v74
   Weniger Deko-Buttons, mehr echte Aktionen. Bessere Übersetzung,
   funktionsfähige Community-Filter und stabilerer Light-Mode-Seitenwechsel.
   ========================================================================== */

body.app-v74 .container,
body.app-v74 .app-page-hero-v72,
body.app-v74 .app-home-hero-v71,
body.app-v74 .dashboard-grid,
body.app-v74 .news-section,
body.app-v74 #feed-section,
body.app-v74 #analytics-content,
body.app-v74 .tool-section,
body.app-v74 .form-card,
body.app-v74 .tabs-container,
body.app-v74 .filter-container {
    width: min(100%, 1120px);
    box-sizing: border-box;
}

body.app-v74 .app-page-hero-v72,
body.app-v74 .app-home-hero-v71,
body.app-v74 .dashboard-grid,
body.app-v74 .news-section {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.app-v74 .app-page-hero-v74 {
    grid-template-columns: 1fr !important;
}

body.app-v74 .app-page-kicker-v72 em {
    font-style: normal;
}

body.app-v74 .app-page-status-v74 {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.045);
    border: 1px solid rgba(15, 23, 42, 0.07);
    color: var(--text-muted);
    font-size: 12.8px;
    line-height: 1.35;
    font-weight: 650;
}

html[data-theme="dark"] body.app-v74 .app-page-status-v74 {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(148, 163, 184, 0.12);
}

body.app-v74 .app-page-metrics-v72 {
    display: none !important;
}

body.page-index.app-v74 .hero-quicklinks-v74 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

body.page-index.app-v74 .hero-quicklinks-v74 a {
    text-decoration: none;
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.07);
    color: var(--text-color);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

html[data-theme="dark"] body.page-index.app-v74 .hero-quicklinks-v74 a {
    background: rgba(15, 23, 42, 0.42);
    border-color: rgba(148, 163, 184, 0.13);
}

body.page-index.app-v74 .hero-quicklinks-v74 a:active {
    transform: scale(.985);
}

body.page-index.app-v74 .hero-quicklinks-v74 strong {
    display: block;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.18px;
}

body.page-index.app-v74 .hero-quicklinks-v74 span {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
}

/* More logical action areas */
body.app-v74 .app-page-actions-v74 {
    margin-top: 20px;
}

body.app-v74 .app-page-action-v72 {
    min-width: 0;
    white-space: normal;
    text-align: center;
}

body.app-v74 .info-box {
    font-size: 14px !important;
    line-height: 1.42 !important;
}

/* Community category filter fix */
body.page-community.app-v74 .community-filter-row-v74 {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 12px !important;
    margin-bottom: 4px !important;
    scrollbar-width: none;
}

body.page-community.app-v74 .community-filter-row-v74::-webkit-scrollbar {
    display: none;
}

body.page-community.app-v74 .community-filter-row-v74 button,
body.page-community.app-v74 .post-category-select-v74 button {
    flex: 0 0 auto;
    border: 1px solid var(--border-color) !important;
    background: var(--surface-strong-v71) !important;
    color: var(--text-muted) !important;
    min-height: 38px;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

body.page-community.app-v74 .community-filter-row-v74 button.active,
body.page-community.app-v74 .post-category-select-v74 button.active {
    background: rgba(255, 159, 67, 0.15) !important;
    border-color: rgba(255, 159, 67, 0.30) !important;
    color: var(--text-color) !important;
}

body.page-community.app-v74 .post-category-label-v74 {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
}

body.page-community.app-v74 .post-category-select-v74 {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 12px;
    margin-bottom: 10px;
    scrollbar-width: none;
}

body.page-community.app-v74 .post-category-select-v74::-webkit-scrollbar {
    display: none;
}

body.page-community.app-v74 .post-topic-v72 {
    background: rgba(255, 159, 67, 0.12) !important;
    color: var(--accent-color) !important;
}

/* Light-mode flash: keep same surface during navigation */
#native-page-curtain-v74 {
    background: #f6f8fc;
}

html[data-theme="dark"] #native-page-curtain-v74 {
    background: #0f172a;
}

#native-page-curtain-v72,
#native-page-curtain-v73 {
    display: none !important;
}

html.is-native-navigating-v74 body.app-v74 .container {
    animation: none !important;
}

html[data-theme="light"] body.app-v74 {
    background-color: #f6f8fc !important;
}

/* Mobile rhythm */
@media (max-width: 768px) {
    body.app-v74 .app-page-actions-v74 {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    body.app-v74 .app-page-status-v74 {
        font-size: 12.2px;
        padding: 10px 11px;
    }

    body.page-index.app-v74 .hero-quicklinks-v74 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.page-index.app-v74 .hero-quicklinks-v74 a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 13px;
    }

    body.page-index.app-v74 .hero-quicklinks-v74 span {
        text-align: right;
        margin-top: 0;
    }

    body.page-community.app-v74 .community-filter-row-v74 {
        margin-left: -2px;
        margin-right: -2px;
    }

    body.page-community.app-v74 .post-category-select-v74 button {
        min-height: 36px;
        padding: 0 11px !important;
    }
}

/* Desktop width consistency */
@media (min-width: 1024px) {
    body.app-v74 .container {
        max-width: 1160px !important;
    }

    body.app-v74 .app-page-hero-v72,
    body.page-index.app-v74 .app-home-hero-v71,
    body.page-index.app-v74 .dashboard-grid,
    body.page-index.app-v74 .news-section {
        max-width: 1060px !important;
    }
}


/* ==========================================================================
   FINAL UI CLEANUP v75
   Removes duplicated hero buttons, fixes homepage gap, improves dark detail pages,
   and makes the UI feel calmer and more professional.
   ========================================================================== */

/* Hide duplicated hero buttons on subpages. Real actions remain in the page content. */
body.app-v75:not(.page-index) .app-page-actions-v72,
body.app-v75:not(.page-index) .app-page-actions-v74 {
    display: none !important;
}

body.app-v75 .app-page-hero-v72 {
    padding: 24px !important;
}

body.app-v75 .app-page-status-v74 {
    margin-top: 18px !important;
    font-size: 13.2px !important;
    line-height: 1.43 !important;
    letter-spacing: -0.05px;
}

/* Homepage: no giant empty gap between hero and updates */
body.page-index.app-v75 .app-home-hero-v71 {
    margin-bottom: 16px !important;
}

body.page-index.app-v75 .news-section {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

body.page-index.app-v75 .container {
    display: block !important;
}

body.page-index.app-v75 .hero-quicklinks-v74 {
    margin-bottom: 0 !important;
}

body.page-index.app-v75 .hero-quicklinks-v74 a {
    cursor: pointer;
}

/* More premium but calmer surface */
body.app-v75 .app-page-hero-v72,
body.app-v75 .app-home-hero-v71,
body.app-v75 .card,
body.app-v75 .tool-section,
body.app-v75 .form-card,
body.app-v75 .post-card,
body.app-v75 .info-box {
    border-width: 1px !important;
}

html[data-theme="light"] body.app-v75 .app-page-hero-v72,
html[data-theme="light"] body.app-v75 .app-home-hero-v71 {
    background:
        radial-gradient(circle at top right, rgba(255, 159, 67, 0.16), transparent 22rem),
        linear-gradient(145deg, rgba(255,255,255,.985), rgba(255,255,255,.94)) !important;
}

/* Club / tools / analytics pages: bring darker detail sections closer to the rest */
html[data-theme="dark"] body.app-v75 .tool-section,
html[data-theme="dark"] body.app-v75 .form-card,
html[data-theme="dark"] body.app-v75 .card,
html[data-theme="dark"] body.app-v75 .info-box,
html[data-theme="dark"] body.app-v75 .filter-container,
html[data-theme="dark"] body.app-v75 .tabs-container {
    background:
        linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(15, 23, 42, .96)) !important;
    border-color: rgba(148, 163, 184, .14) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.24), var(--app-ring-v71) !important;
}

body.app-v75 .tool-section h2,
body.app-v75 .form-card h2,
body.app-v75 .card h2 {
    letter-spacing: -0.75px !important;
}

/* SG Timer page refinement */
body.page-sg-timer-live.app-v75 .container > .card,
body.page-sg-timer-live.app-v75 .container > section,
body.page-sg-timer-live.app-v75 .tool-section {
    border-radius: 24px !important;
}

body.page-sg-timer-live.app-v75 button,
body.page-sg-timer-live.app-v75 .btn {
    border-radius: 18px !important;
}

/* Hidden/club pages: remove confusing hero actions, keep status. */
body.page-performance.app-v75 .app-page-status-v74,
body.page-doppel-aa.app-v75 .app-page-status-v74,
body.page-analytics.app-v75 .app-page-status-v74 {
    border-color: rgba(255, 159, 67, .18) !important;
}

/* Community final polish */
body.page-community.app-v75 .community-composer-v72 {
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, var(--shadow-sm), var(--app-ring-v71) !important;
}

body.page-community.app-v75 .community-filter-row-v74 {
    position: relative;
    z-index: 3;
}

body.page-community.app-v75 .community-filter-row-v74 button {
    cursor: pointer;
}

body.page-community.app-v75 .post-card {
    border-color: rgba(255, 159, 67, .20) !important;
}

/* Light-mode navigation curtain stronger to avoid white/dark jump */
#native-page-curtain-v74,
#native-page-curtain-v75 {
    background: #f6f8fc !important;
}

html[data-theme="dark"] #native-page-curtain-v74,
html[data-theme="dark"] #native-page-curtain-v75 {
    background: #0f172a !important;
}

/* Mobile spacing */
@media (max-width: 768px) {
    body.app-v75 .app-page-hero-v72 {
        padding: 20px 18px !important;
        margin-bottom: 14px !important;
    }

    body.app-v75 .app-page-status-v74 {
        margin-top: 16px !important;
    }

    body.page-index.app-v75 .app-home-hero-v71 {
        margin-bottom: 14px !important;
    }

    body.page-index.app-v75 .news-section {
        margin-top: 0 !important;
    }
}

/* Desktop alignment */
@media (min-width: 1024px) {
    body.app-v75 .app-page-hero-v72,
    body.page-index.app-v75 .app-home-hero-v71,
    body.page-index.app-v75 .news-section,
    body.page-index.app-v75 .dashboard-grid {
        max-width: 1080px !important;
    }
}


/* ========================================================================
   V76 CONTENT + LOGIC CLEANUP
   ======================================================================== */
body.app-v76 .app-page-status-v74:empty { display: none !important; }
body.page-marktplatz.app-v76 .app-page-status-v74,
body.page-community.app-v76 .app-page-status-v74,
body.page-ipsc-hub.app-v76 .app-page-status-v74 { display:none !important; }
body.page-index.app-v76 .app-home-hero-v71 { margin-bottom: 12px !important; }
body.page-index.app-v76 .home-section-separator-v76 { width:min(92%, 1080px); height:1px; margin:12px auto 12px; background:linear-gradient(90deg,transparent,rgba(148,163,184,.28),transparent); }
body.page-index.app-v76 .news-section { margin-top: 0 !important; }
body.page-index.app-v76 .home-favorites-v76 { margin-top: 18px; }
body.page-index.app-v76 .home-favorites-head-v76 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
body.page-index.app-v76 .home-favorites-head-v76 strong { display:block; color:var(--text-color); font-size:14px; font-weight:900; letter-spacing:-.15px; }
body.page-index.app-v76 .home-favorites-head-v76 span { display:block; margin-top:2px; color:var(--text-muted); font-size:12px; }
body.page-index.app-v76 .fav-edit-btn-v76 { border:1px solid var(--border-color); background:var(--surface-soft-v71); color:var(--text-color); border-radius:999px; padding:8px 11px; font-size:12px; font-weight:850; }
body.page-index.app-v76 .hero-quicklinks-v76 a strong span { margin-right:6px; }
.favorites-modal-v76 { position:fixed; inset:0; z-index:2147483400; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.35); padding:18px; }
.favorites-modal-v76.show { display:flex; }
.favorites-sheet-v76 { width:min(100%,520px); max-height:min(82dvh,640px); overflow:auto; border-radius:28px; padding:18px; background:var(--surface-strong-v71); border:1px solid var(--border-color); box-shadow:0 24px 70px rgba(15,23,42,.28); }
.favorites-sheet-head-v76 { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.favorites-sheet-head-v76 strong { display:block; font-size:22px; font-weight:950; color:var(--text-color); }
.favorites-sheet-head-v76 span { display:block; color:var(--text-muted); margin-top:3px; font-size:13px; }
.favorites-sheet-head-v76 button { width:42px; height:42px; border-radius:999px; border:1px solid var(--border-color); background:var(--surface-soft-v71); font-size:26px; color:var(--text-muted); }
.favorites-options-v76 { display:grid; gap:8px; }
.favorites-options-v76 button { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border-radius:18px; border:1px solid var(--border-color); background:transparent; text-align:left; color:var(--text-color); }
.favorites-options-v76 button.selected { border-color:rgba(255,159,67,.45); background:rgba(255,159,67,.12); }
.favorites-options-v76 button > span { width:36px; height:36px; border-radius:13px; display:grid; place-items:center; background:rgba(255,159,67,.12); }
.favorites-options-v76 strong { display:block; font-size:14px; }
.favorites-options-v76 small { display:block; color:var(--text-muted); font-size:12px; margin-top:2px; }
.favorites-save-v76 { margin-top:14px; width:100%; min-height:48px; border-radius:18px; border:0; background:var(--accent-gradient); color:white; font-weight:900; font-size:15px; }
.section-source-v76 { margin-top:-12px; margin-bottom:18px; color:var(--text-muted); font-size:13px; font-weight:700; }
.planner-status-legend-v76 { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; color:var(--text-muted); font-size:12.5px; }
.planner-status-legend-v76 span { padding:7px 10px; border-radius:999px; background:var(--surface-soft-v71); border:1px solid var(--border-color); }
body.page-schiessbuch.app-v76 #schiessbuch-integrity-info { display:none !important; }
body.page-ipsc-hub.app-v76 .hub-header-area { display:none !important; }
body.page-analytics.app-v76 #analytics-dashboard-content > div:first-child[style*="border-left"] { display:none !important; }
.reload-new-entry-v76 { width:100%; min-height:58px; border-radius:22px; border:1px solid rgba(255,159,67,.24); background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,159,67,.055)); display:flex; align-items:center; justify-content:space-between; padding:0 18px; color:var(--text-color); font-weight:950; font-size:17px; margin-bottom:16px; }
html[data-theme="dark"] .reload-new-entry-v76 { background:linear-gradient(145deg, rgba(17,24,39,.98), rgba(255,159,67,.09)); }
.reload-new-entry-v76 span { width:42px; height:42px; border-radius:16px; display:grid; place-items:center; background:rgba(255,159,67,.13); color:var(--accent-color); font-size:26px; order:2; }
.reload-form-panel-v76[hidden] { display:none !important; }
.reload-safety-v76 { margin:14px 0 20px; padding:12px 14px; border-radius:16px; border:1px dashed rgba(255,159,67,.25); color:var(--text-muted); font-size:12.8px; line-height:1.38; background:rgba(255,159,67,.06); }
body.page-sg-timer-live.app-v76 .tab-navigation { display:flex; gap:8px; padding:6px; border-radius:24px; background:var(--surface-strong-v71); border:1px solid var(--border-color); margin-bottom:18px; }
body.page-sg-timer-live.app-v76 .tab-btn { flex:1; border-radius:18px !important; border:1px solid transparent !important; background:transparent !important; color:var(--text-muted) !important; font-weight:900 !important; box-shadow:none !important; }
body.page-sg-timer-live.app-v76 .tab-btn.active { background:rgba(255,159,67,.15) !important; color:var(--text-color) !important; border-color:rgba(255,159,67,.24) !important; }
body.page-sg-timer-live.app-v76 .btn-blue,
body.page-sg-timer-live.app-v76 .btn-green,
body.page-sg-timer-live.app-v76 .btn-red { background:var(--surface-soft-v71) !important; color:var(--text-color) !important; border:1px solid var(--border-color) !important; box-shadow:none !important; }
body.page-sg-timer-live.app-v76 #btn-connect { background:var(--accent-gradient) !important; color:white !important; border:0 !important; }
body.page-sg-timer-live.app-v76 .timer-card-desc-v76 { margin:-4px 0 14px; color:var(--text-muted); font-size:13px; line-height:1.4; }
body.page-tools.app-v76 [data-txt="v76-tools-dry-start"] { display:inline-block; }
body.page-tools.app-v76 button:has([data-txt="v76-tools-dry-start"]) { display:block !important; margin-left:auto !important; margin-right:auto !important; width:min(100%, 420px) !important; text-align:center !important; }
.club-links-v76 { position:relative; margin:6px 0 12px; padding:22px 10px 10px; border:2px solid rgba(255,159,67,.42); border-radius:24px; background:linear-gradient(145deg, rgba(255,159,67,.08), rgba(255,255,255,.55)); }
html[data-theme="dark"] .club-links-v76 { background:linear-gradient(145deg, rgba(255,159,67,.10), rgba(15,23,42,.72)); }
.club-links-label-v76 { position:absolute; top:-12px; left:22px; padding:3px 10px; border-radius:999px; background:var(--surface-strong-v71); color:var(--accent-color); font-size:11px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.club-links-v76 a { margin-bottom:8px !important; }
.more-scroll-hint-v76 { text-align:center; color:var(--text-muted); font-size:12px; font-weight:800; padding:2px 0 10px; }
.more-scroll-hint-v76::after { content:" ↓"; color:var(--accent-color); }
body.page-doppel-aa.app-v76 .app-page-hero-v72,
body.page-performance.app-v76 .app-page-hero-v72 { border-color:rgba(255,159,67,.22) !important; }
@media (max-width:768px){
  body.page-index.app-v76 .home-section-separator-v76 { margin:10px auto 10px; }
  body.page-index.app-v76 .news-section { margin-top:0 !important; }
  .favorites-modal-v76 { padding:0; }
  .favorites-sheet-v76 { border-radius:30px 30px 0 0; max-height:82dvh; }
}


/* V76B hotfix: hard visual grouping for hidden club pages */
.club-links-v76b { margin-top: 4px !important; margin-bottom: 10px !important; }
.club-links-v76b a { display:flex !important; align-items:center !important; justify-content:center !important; min-height:48px !important; border-radius:16px !important; font-weight:900 !important; }
.club-links-v76b a.active, .club-links-v76b a.vip-link:first-of-type { background: var(--accent-gradient) !important; color:white !important; border-color:transparent !important; box-shadow:0 12px 26px rgba(255,128,8,.18) !important; }
.more-scroll-hint-v76 { position:relative; }
body.app-v76b .app-page-hero-v72 h2:empty::after { content: attr(data-txt); }


/* ==========================================================================
   V76C HOTFIX
   - Double Alpha e.V. links are only rendered after Supabase confirms access.
   - Free matches heading/source line spacing fixed.
   - Reloading saved recipe area renamed to Ladedaten.
   ========================================================================== */

#club-links-placeholder-v76c:empty {
    display: none !important;
}

.more-menu-content .club-links-v76c {
    margin-bottom: 14px !important;
}

.section-heading-v76c {
    width: min(100%, 1120px);
    margin: 18px auto 14px !important;
    padding: 0 2px;
}

.section-heading-v76c h2 {
    margin: 0 0 4px !important;
    font-size: clamp(30px, 6vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.9px;
    color: var(--text-color);
}

.section-heading-v76c .section-source-v76 {
    display: block !important;
    margin: 0 !important;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}

body.page-freie-matches.app-v76c .filter-container {
    margin-top: 12px !important;
}

@media (max-width: 768px) {
    .section-heading-v76c {
        margin: 14px auto 12px !important;
        padding: 0 0;
    }

    .section-heading-v76c h2 {
        font-size: 30px !important;
    }

    .section-heading-v76c .section-source-v76 {
        font-size: 13.5px !important;
    }
}


/* V76D: Double Alpha retry menu fix */
.club-links-v76d {
    animation: clubLinksAppearV76d .18s ease-out both;
}

@keyframes clubLinksAppearV76d {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   V76E ACCOUNT & LOGIN POLISH
   ========================================================================== */

#auth-modal .modal-content {
    border-radius: 34px !important;
    padding: 30px 28px !important;
    max-width: 560px !important;
    width: min(94vw, 560px) !important;
    max-height: min(86vh, 820px) !important;
    overflow-y: auto !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .35) !important;
    border-top: 4px solid var(--accent-color) !important;
}

#modal-login-view.login-polish-v76e h3,
#modal-settings-view.settings-polish-v76e h3 {
    font-size: clamp(34px, 7vw, 46px) !important;
    line-height: .98 !important;
    letter-spacing: -1.4px !important;
    margin: 4px 0 10px !important;
}

.auth-subtitle-v76e {
    margin: 0 0 18px !important;
    color: var(--text-muted) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

.login-polish-v76e .quick-login-panel-v76e {
    margin: 16px 0 18px !important;
    padding: 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(255, 159, 67, .08), rgba(255,255,255,.72)) !important;
    box-shadow: var(--shadow-sm) !important;
    text-align: left !important;
}

html[data-theme="dark"] .login-polish-v76e .quick-login-panel-v76e {
    background: linear-gradient(145deg, rgba(255, 159, 67, .10), rgba(30, 41, 59, .82)) !important;
}

.login-polish-v76e .quick-login-panel-v76e > p {
    margin: 0 0 10px !important;
    font-size: 12px !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    font-weight: 900 !important;
}

.auth-trust-v76e {
    margin: 10px 4px 0 !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.auth-provider-btn-v76e,
.login-polish-v76e .btn-social-passkey,
.login-polish-v76e .btn-social-apple,
.login-polish-v76e .btn-social-google {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 17px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: -.2px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.auth-provider-btn-v76e:active {
    transform: scale(.985);
}

.login-polish-v76e .btn-social-passkey {
    background: rgba(59, 130, 246, .08) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(59, 130, 246, .22) !important;
}

.login-polish-v76e .btn-social-apple {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .25) !important;
}

html[data-theme="dark"] .login-polish-v76e .btn-social-apple {
    background: #ffffff !important;
    color: #0f172a !important;
}

.login-polish-v76e .btn-social-google {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.apple-mark-v76e {
    font-size: 23px !important;
    line-height: 1 !important;
    margin-right: 2px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
}

.auth-email-label-v76e {
    margin: 18px 0 10px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    font-weight: 900 !important;
}

.login-polish-v76e #login-form {
    padding: 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    background: rgba(148, 163, 184, .06) !important;
}

.login-polish-v76e #login-form .form-group {
    margin-bottom: 12px !important;
}

.login-polish-v76e #login-form input,
.settings-polish-v76e input,
.settings-polish-v76e select {
    border-radius: 16px !important;
}

.login-polish-v76e .modal-footer {
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Settings */
.settings-profile-head-v76e {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
    margin: 14px 0 18px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(255, 159, 67, .10), rgba(255, 255, 255, .72)) !important;
    box-shadow: var(--shadow-sm) !important;
}

html[data-theme="dark"] .settings-profile-head-v76e {
    background: linear-gradient(145deg, rgba(255, 159, 67, .10), rgba(30, 41, 59, .82)) !important;
}

.settings-profile-head-v76e img {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid rgba(255, 159, 67, .45) !important;
    box-shadow: 0 10px 26px rgba(255, 159, 67, .20) !important;
}

.settings-profile-head-v76e div {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.profile-head-name-v76e {
    font-size: 20px !important;
    color: var(--text-color) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.profile-head-meta-v76e,
.profile-head-email-v76e {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.settings-section-title-v76e {
    margin: 20px 0 10px !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
}

.settings-polish-v76e .settings-form-v76e,
.settings-polish-v76e .settings-passkey-card,
.settings-polish-v76e .settings-stats-card {
    border-radius: 24px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--card-bg) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.settings-polish-v76e .settings-realname-card,
.settings-polish-v76e .settings-alias-card {
    border-radius: 18px !important;
    border: 1px solid var(--border-color) !important;
    border-left-width: 4px !important;
    margin-bottom: 14px !important;
}

.settings-polish-v76e .settings-passkey-card.passkey-polished-v76e {
    background: linear-gradient(145deg, rgba(59, 130, 246, .08), rgba(255,255,255,.72)) !important;
}

html[data-theme="dark"] .settings-polish-v76e .settings-passkey-card.passkey-polished-v76e {
    background: linear-gradient(145deg, rgba(59, 130, 246, .12), rgba(30,41,59,.82)) !important;
}

.settings-polish-v76e .settings-passkey-title {
    color: var(--info-color) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.settings-polish-v76e .settings-stats-card.stats-polished-v76e {
    background: linear-gradient(145deg, rgba(16, 185, 129, .07), rgba(255,255,255,.72)) !important;
}

html[data-theme="dark"] .settings-polish-v76e .settings-stats-card.stats-polished-v76e {
    background: linear-gradient(145deg, rgba(16, 185, 129, .10), rgba(30,41,59,.82)) !important;
}

.settings-polish-v76e .settings-stats-title {
    font-size: 17px !important;
    color: var(--success-color) !important;
    font-weight: 950 !important;
}

.settings-polish-v76e .settings-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.settings-polish-v76e .settings-stat-item {
    border-radius: 18px !important;
    padding: 12px !important;
}

.avatar-polished-v76e {
    padding: 14px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    background: rgba(148, 163, 184, .06) !important;
    align-items: center !important;
}

.avatar-polished-v76e input[type="file"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

.settings-avatar-preview-v76e {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255,159,67,.40) !important;
    margin: 0 auto 12px !important;
}

.avatar-upload-btn-v76e {
    border: 1px solid rgba(255, 159, 67, .30) !important;
    background: rgba(255, 159, 67, .08) !important;
    color: var(--accent-color) !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.settings-collapse-v76e,
.settings-danger-v76e {
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    background: rgba(148, 163, 184, .06) !important;
    padding: 0 !important;
    margin: 12px 0 16px !important;
    overflow: hidden !important;
}

.settings-collapse-v76e summary,
.settings-danger-v76e summary {
    list-style: none !important;
    cursor: pointer !important;
    padding: 15px 16px !important;
    color: var(--text-color) !important;
    font-weight: 950 !important;
}

.settings-collapse-v76e summary::-webkit-details-marker,
.settings-danger-v76e summary::-webkit-details-marker {
    display: none !important;
}

.settings-collapse-v76e summary::after,
.settings-danger-v76e summary::after {
    content: "⌄";
    float: right;
    color: var(--text-muted);
}

.settings-collapse-v76e[open] summary::after,
.settings-danger-v76e[open] summary::after {
    transform: rotate(180deg);
}

.settings-collapse-help-v76e {
    margin: -4px 16px 12px !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.settings-collapse-v76e .form-group {
    padding: 0 16px 16px !important;
    margin: 0 !important;
}

.settings-danger-v76e {
    border-color: rgba(239, 68, 68, .24) !important;
    background: rgba(239, 68, 68, .04) !important;
}

.settings-danger-v76e summary {
    color: #ef4444 !important;
}

.settings-danger-v76e .btn-danger-block {
    margin: 0 16px 16px !important;
    width: calc(100% - 32px) !important;
    border-radius: 16px !important;
}

@media (max-width: 600px) {
    #auth-modal .modal-content {
        width: calc(100vw - 30px) !important;
        padding: 26px 22px !important;
        border-radius: 30px !important;
    }

    #modal-login-view.login-polish-v76e h3,
    #modal-settings-view.settings-polish-v76e h3 {
        font-size: 36px !important;
    }

    .settings-profile-head-v76e img {
        width: 58px !important;
        height: 58px !important;
    }

    .profile-head-name-v76e {
        font-size: 18px !important;
    }
}


/* ==========================================================================
   V76F LOGIN + SETTINGS BALANCE
   ========================================================================== */

/* Login wieder ruhiger/klassischer */
#modal-login-view.login-balanced-v76f h3 {
    font-size: clamp(42px, 9vw, 56px) !important;
    line-height: .94 !important;
    margin-bottom: 10px !important;
}

.login-balanced-v76f .auth-subtitle-v76e {
    margin-bottom: 18px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    max-width: 420px;
}

.login-balanced-v76f #login-form {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.login-balanced-v76f #login-form .form-group {
    margin-bottom: 14px !important;
}

.login-balanced-v76f #login-form label {
    font-size: 12px !important;
    letter-spacing: .16em !important;
    font-weight: 950 !important;
}

.login-balanced-v76f #login-form input {
    min-height: 58px !important;
    border-radius: 18px !important;
}

.login-balanced-v76f .quick-login-balanced-v76f {
    margin-top: 14px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1px solid var(--border-color) !important;
    background: rgba(148, 163, 184, .055) !important;
    box-shadow: var(--shadow-sm) !important;
}

html[data-theme="dark"] .login-balanced-v76f .quick-login-balanced-v76f {
    background: rgba(30, 41, 59, .70) !important;
}

.login-balanced-v76f .quick-login-balanced-v76f > p {
    text-align: center !important;
    margin: 0 0 12px !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.login-balanced-v76f .auth-trust-v76e {
    text-align: center !important;
    margin: 12px 4px 0 !important;
}

/* Konto: Profil einklappbar und alles kompakter */
.settings-compact-v76f .settings-profile-head-v76e {
    margin-bottom: 14px !important;
}

.settings-compact-v76f .settings-section-title-v76e {
    margin-top: 14px !important;
    margin-bottom: 8px !important;
}

.profile-editor-v76f {
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    background: var(--card-bg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}

.profile-editor-v76f summary {
    list-style: none !important;
    cursor: pointer !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.profile-editor-v76f summary::-webkit-details-marker {
    display: none !important;
}

.profile-editor-v76f summary span {
    display: grid !important;
    gap: 3px !important;
}

.profile-editor-v76f summary strong {
    color: var(--text-color) !important;
    font-size: 17px !important;
    font-weight: 950 !important;
}

.profile-editor-v76f summary small {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.profile-editor-v76f summary em {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 159, 67, .11);
    color: var(--accent-color);
    font-style: normal;
    font-weight: 950;
    transition: transform .16s ease;
}

.profile-editor-v76f[open] summary em {
    transform: rotate(180deg);
}

.profile-editor-v76f .settings-form-v76e {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px !important;
    background: transparent !important;
}

.settings-compact-v76f .settings-realname-card,
.settings-compact-v76f .settings-alias-card {
    padding: 14px !important;
    margin-bottom: 12px !important;
}

.settings-compact-v76f .settings-realname-card label,
.settings-compact-v76f .settings-alias-card label {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.settings-compact-v76f .settings-realname-card p,
.settings-compact-v76f .settings-alias-card p {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.settings-compact-v76f .avatar-polished-v76e {
    padding: 12px !important;
}

.settings-compact-v76f .settings-avatar-preview-v76e {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
}

.settings-compact-v76f .settings-passkey-card,
.settings-compact-v76f .settings-stats-card {
    padding: 14px !important;
    margin-bottom: 14px !important;
}

@media (max-width: 600px) {
    #auth-modal .modal-content {
        max-height: 88vh !important;
    }

    #modal-login-view.login-balanced-v76f h3 {
        font-size: 48px !important;
    }

    .login-balanced-v76f .auth-subtitle-v76e {
        font-size: 16px !important;
    }

    .login-balanced-v76f .quick-login-balanced-v76f {
        padding: 14px !important;
    }

    .login-balanced-v76f .auth-provider-btn-v76e,
    .login-balanced-v76f .btn-social-passkey,
    .login-balanced-v76f .btn-social-apple,
    .login-balanced-v76f .btn-social-google {
        min-height: 52px !important;
        font-size: 15px !important;
    }
}


/* ==========================================================================
   V76H SAFE PERFORMANCE HOTFIX
   Keine globalen MutationObserver, keine schweren Page-Overlays.
   ========================================================================== */

.club-links-v76h,
.club-links-v76d,
.club-links-v76g {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

.more-scroll-hint-v76::after {
    content: " ↓" !important;
    color: var(--accent-color);
}

#modal-login-view.login-balanced-v76f h3 {
    font-size: clamp(38px, 7.2vw, 46px) !important;
    line-height: 1.02 !important;
    margin-bottom: 8px !important;
    letter-spacing: -1.1px !important;
}

#auth-modal .modal-content {
    padding-top: 24px !important;
}

.login-balanced-v76f .auth-subtitle-v76e {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] body.is-app-shell,
html[data-theme="light"].is-native-shell body,
html[data-theme="light"].is-standalone-app body {
    background-color: #f6f8fc !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.is-app-shell,
html[data-theme="dark"].is-native-shell body,
html[data-theme="dark"].is-standalone-app body {
    background-color: #0f172a !important;
}

html[data-theme="light"] #app-page-transition-cover,
html[data-theme="light"] #native-page-curtain-v74 {
    background-color: #f6f8fc !important;
}

html[data-theme="dark"] #app-page-transition-cover,
html[data-theme="dark"] #native-page-curtain-v74 {
    background-color: #0f172a !important;
}

@media (max-width: 600px) {
    #modal-login-view.login-balanced-v76f h3 {
        font-size: 42px !important;
    }
}


/* ==========================================================================
   V76J DESKTOP WIDTH + ELO AUTOMATIC FIX
   - Desktop-Inhalte sind wieder so breit wie der Hero-Bereich.
   - Analytics/Reloading/Community/Performance nutzen die volle Containerbreite.
   ========================================================================== */

@media (min-width: 900px) {
    body.page-marktplatz .container,
    body.page-community .container,
    body.page-analytics .container,
    body.page-wiederladen .container,
    body.page-performance .container,
    body.page-tools .container,
    body.page-schiessbuch .container,
    body.page-freie-matches .container,
    body.page-mein-planer .container {
        width: min(100% - 48px, 1180px) !important;
        max-width: 1180px !important;
        margin: 34px auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    body.page-community .tabs-container,
    body.page-community #logged-out-msg,
    body.page-community #username-setup-section,
    body.page-community #post-composer-v74,
    body.page-community #posts-container,
    body.page-community .post-card,
    body.page-community .comments-wrapper,
    body.page-marktplatz .info-box,
    body.page-marktplatz .filter-bar,
    body.page-marktplatz .form-section,
    body.page-marktplatz .match-card,
    body.page-marktplatz .listing-card,
    body.page-marktplatz #listings-container,
    body.page-analytics .tool-section,
    body.page-analytics #analytics-dashboard-content,
    body.page-wiederladen .tool-section,
    body.page-performance #dashboard-content,
    body.page-performance .info-box,
    body.page-performance #quick-analyze-section,
    body.page-performance .link-import-bar,
    body.page-performance .upload-zone,
    body.page-performance .match-archive,
    body.page-performance #analysis-results {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-analytics .container > .tool-section[style] {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.page-analytics #analytics-dashboard-content > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.page-performance .upload-zone {
        min-height: 190px;
    }
}

body.page-performance .planner-quick-btn-v76j {
    background-color: var(--input-bg) !important;
    color: var(--info-color) !important;
    border: 1px solid var(--info-color) !important;
    border-radius: var(--radius) !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

body.page-performance .planner-quick-btn-v76j:disabled {
    opacity: .72 !important;
    cursor: not-allowed !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

body.page-performance .planner-quick-btn-v76j small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}


/* ========================================================================== 
   V76K LAUNCH POLISH
   - Marktplatz owner actions are visible after auth re-render.
   - Price moves into the free right-side card area.
   - Inbox clearly marks new conversations.
   - More menu remembers its lower scroll position.
   - Reloading form is separate from saved Ladedaten.
   ========================================================================== */
body.page-marktplatz .match-header-flex {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
}

body.page-marktplatz .match-price-head-v76k {
    align-self: start !important;
    justify-self: end !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 159, 67, 0.10) !important;
    border: 1px solid rgba(255, 159, 67, 0.22) !important;
    color: var(--text-color) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

html[data-theme="dark"] body.page-marktplatz .match-price-head-v76k {
    background: rgba(255, 159, 67, 0.13) !important;
    border-color: rgba(255, 159, 67, 0.24) !important;
}

body.page-marktplatz .match-card:has(.owner-menu) .match-price-head-v76k {
    margin-right: 36px !important;
}

body.page-marktplatz .card-actions {
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "primary"
        "secondary" !important;
}

body.page-marktplatz .card-actions > .match-price {
    display: none !important;
}

body.page-marktplatz .action-buttons-group.manage-actions {
    grid-template-columns: 1fr 1fr !important;
}

body.page-marktplatz .action-buttons-group.manage-actions .btn-mediated {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: 1 / -1 !important;
    min-height: 36px !important;
    background: rgba(52, 211, 153, 0.14) !important;
    color: var(--success-color) !important;
    border: 1px solid rgba(52, 211, 153, 0.30) !important;
}

#global-inbox-modal .modal-content,
#global-inbox-modal .global-inbox-content-v76k {
    border-radius: 30px !important;
}

#global-inbox-list {
    gap: 8px !important;
    padding-right: 2px !important;
}

.inbox-chat-item-v76k {
    width: 100% !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-radius: 18px !important;
    padding: 13px 14px !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
    display: grid !important;
    gap: 4px !important;
    transition: transform .14s ease, border-color .14s ease, background .14s ease !important;
}

.inbox-chat-item-v76k:active {
    transform: scale(.985) !important;
}

.inbox-chat-item-v76k.is-unread {
    border-color: rgba(255, 159, 67, 0.42) !important;
    background: linear-gradient(135deg, rgba(255,159,67,.13), rgba(255,255,255,.72)) !important;
}

html[data-theme="dark"] .inbox-chat-item-v76k.is-unread {
    background: linear-gradient(135deg, rgba(255,159,67,.16), rgba(15,23,42,.72)) !important;
}

.inbox-chat-title-row-v76k {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.inbox-chat-title-row-v76k strong {
    color: var(--accent-color) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.inbox-chat-title-row-v76k em {
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    padding: 4px 8px !important;
    background: var(--accent-gradient) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.inbox-chat-partner-v76k,
.inbox-chat-snippet-v76k,
.inbox-loading-v76k,
.inbox-empty-v76k {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.inbox-chat-snippet-v76k {
    color: var(--text-color) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.inbox-chat-snippet-v76k b {
    color: var(--text-muted) !important;
    font-weight: 800 !important;
}

.inbox-loading-v76k,
.inbox-empty-v76k {
    padding: 18px 8px !important;
    text-align: center !important;
    font-style: italic !important;
}

.reloading-loads-section-v76k {
    margin-top: 22px !important;
}

.reload-form-panel-v76 {
    margin-bottom: 18px !important;
}

.reload-new-entry-v76.is-open span {
    transform: rotate(45deg) !important;
}

@media (max-width: 768px) {
    body.page-marktplatz .match-header-flex {
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
    }

    body.page-marktplatz .match-price-head-v76k {
        font-size: 13px !important;
        padding: 6px 8px !important;
        max-width: 104px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.page-marktplatz .match-card:has(.owner-menu) .match-price-head-v76k {
        margin-right: 30px !important;
    }

    body.page-marktplatz .card-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "secondary"
            "primary" !important;
        gap: 7px !important;
    }

    body.page-marktplatz .primary-actions,
    body.page-marktplatz .action-buttons-group,
    body.page-marktplatz .manage-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    body.page-marktplatz .action-buttons-group.manage-actions .btn-mediated {
        grid-column: 1 / -1 !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    #more-menu-list.more-menu-content {
        scroll-behavior: auto !important;
        overscroll-behavior: contain !important;
    }
}


/* ========================================================================== 
   V76M BROWSER WIDTH + ELO PLANER POLISH
   - Desktop browser: all main content cards share the same shell width.
   - Marktplatz, Matches, Planer, Community, Schießbuch, Tools,
     Statistiken, Wiederladen and ELO no longer jump between different widths.
   - Planner action buttons cleaned up on desktop.
   ========================================================================== */
@media (min-width: 900px) {
    body.page-marktplatz .container,
    body.page-freie-matches .container,
    body.page-mein-planer .container,
    body.page-community .container,
    body.page-schiessbuch .container,
    body.page-tools .container,
    body.page-analytics .container,
    body.page-wiederladen .container,
    body.page-performance .container,
    body.page-doppel-aa .container,
    body.page-ipsc-hub .container,
    body.page-sg-timer-live .container {
        width: min(calc(100vw - 72px), 1240px) !important;
        max-width: 1240px !important;
        margin: 34px auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-marktplatz .container > .app-page-hero-v72,
    body.page-marktplatz .container > .info-box,
    body.page-marktplatz .container > .market-form-accordion,
    body.page-marktplatz .container > .filter-bar,
    body.page-marktplatz .container > .filter-container,
    body.page-marktplatz .container > .match-list,
    body.page-marktplatz .container > #listings-container,
    body.page-marktplatz .container > #ads-list,
    body.page-marktplatz .container > h2,
    body.page-marktplatz .container > h3,
    body.page-freie-matches .container > .app-page-hero-v72,
    body.page-freie-matches .container > .section-heading-v76c,
    body.page-freie-matches .container > .filter-container,
    body.page-freie-matches .container > .match-list,
    body.page-mein-planer .container > .app-page-hero-v72,
    body.page-mein-planer .container > #logged-out-section,
    body.page-mein-planer .container > #planner-section,
    body.page-mein-planer .container > .planner-form-accordion,
    body.page-community .container > .app-page-hero-v72,
    body.page-community .container > .tabs-container,
    body.page-community .container > #logged-out-msg,
    body.page-community .container > #username-setup-section,
    body.page-community .container > #feed-section,
    body.page-community .container > #groups-section,
    body.page-schiessbuch .container > .app-page-hero-v72,
    body.page-schiessbuch .container > #auth-guard,
    body.page-schiessbuch .container > #logbook-content,
    body.page-schiessbuch .container > .dash-1218,
    body.page-schiessbuch .container > .page-section,
    body.page-tools .container > .app-page-hero-v72,
    body.page-tools .container > .tool-section,
    body.page-analytics .container > .app-page-hero-v72,
    body.page-analytics .container > .tool-section,
    body.page-analytics .container > #analytics-dashboard-content,
    body.page-wiederladen .container > .app-page-hero-v72,
    body.page-wiederladen .container > .tool-section,
    body.page-performance .container > .app-page-hero-v72,
    body.page-performance .container > #access-denied,
    body.page-performance .container > #dashboard-content,
    body.page-doppel-aa .container > .app-page-hero-v72,
    body.page-doppel-aa .container > .info-box,
    body.page-doppel-aa .container > .filter-container,
    body.page-doppel-aa .container > .match-list,
    body.page-ipsc-hub .container > .app-page-hero-v72,
    body.page-ipsc-hub .container > .hub-grid,
    body.page-sg-timer-live .container > .app-page-hero-v72,
    body.page-sg-timer-live .container > .tool-section,
    body.page-sg-timer-live .container > .card,
    body.page-sg-timer-live .container > section {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-community #post-composer-v74,
    body.page-community .community-filter-row-v72,
    body.page-community #posts-container,
    body.page-community #groups-list,
    body.page-community .post-card,
    body.page-community .comments-wrapper,
    body.page-mein-planer #planner-section,
    body.page-mein-planer #match-list,
    body.page-mein-planer .match-item,
    body.page-marktplatz #listings-container,
    body.page-marktplatz #ads-list,
    body.page-marktplatz .match-card,
    body.page-freie-matches #js-match-container,
    body.page-freie-matches .match-card,
    body.page-schiessbuch #log-list,
    body.page-schiessbuch .log-card,
    body.page-schiessbuch .log-entry,
    body.page-tools .tool-section > *,
    body.page-analytics #analytics-dashboard-content,
    body.page-analytics #stage-list,
    body.page-wiederladen #reloading-content,
    body.page-wiederladen .reloading-loads-section-v76k,
    body.page-wiederladen #db-loads-list-container,
    body.page-wiederladen #db-loads-list-container > *,
    body.page-performance #dashboard-content > .info-box,
    body.page-performance #quick-analyze-section,
    body.page-performance .link-import-bar,
    body.page-performance .upload-zone,
    body.page-performance .match-archive,
    body.page-performance #analysis-results,
    body.page-performance .loader-container {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    body.page-community #groups-section,
    body.page-community #logged-out-msg,
    body.page-community #username-setup-section,
    body.page-mein-planer #logged-out-section,
    body.page-schiessbuch #auth-guard {
        border-radius: 28px !important;
    }

    body.page-mein-planer .match-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 220px !important;
        gap: 18px !important;
        align-items: center !important;
        padding: 20px 22px !important;
        border-radius: 22px !important;
    }

    body.page-mein-planer .planner-card-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        justify-self: end !important;
        align-items: stretch !important;
        width: 220px !important;
        margin-top: 0 !important;
    }

    body.page-mein-planer .planner-card-actions button,
    body.page-mein-planer .planner-insert-btn,
    body.page-mein-planer .planner-delete-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        letter-spacing: .01em !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body.page-mein-planer .planner-insert-btn {
        background: linear-gradient(135deg, #ff9f43 0%, #ff8008 100%) !important;
        border: 1px solid rgba(255,128,8,.22) !important;
        color: #fff !important;
        box-shadow: 0 10px 24px rgba(255,128,8,.22) !important;
    }

    body.page-mein-planer .planner-delete-btn {
        background: rgba(239,68,68,.06) !important;
        border: 1px solid rgba(239,68,68,.22) !important;
        color: var(--danger-color) !important;
        box-shadow: none !important;
    }

    body.page-performance .planner-quick-btn-v76j {
        border-radius: 18px !important;
        padding: 14px 16px !important;
    }
}

@media (max-width: 899px) {
    body.page-marktplatz .container,
    body.page-freie-matches .container,
    body.page-mein-planer .container,
    body.page-community .container,
    body.page-schiessbuch .container,
    body.page-tools .container,
    body.page-analytics .container,
    body.page-wiederladen .container,
    body.page-performance .container {
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   V76O NATIVE LIGHT-MODE TRANSITION POLISH
   Verhindert das harte weiße Blitzen in der iOS-App beim Seitenwechsel.
   Browser-Layout bleibt unverändert; der Guard greift nur in der nativen Shell.
   ========================================================================== */
:root {
    --app-light-surface-v76o: #f6f8fc;
    --app-dark-surface-v76o: #0f172a;
}

html,
body {
    background-color: var(--app-light-surface-v76o) !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--app-dark-surface-v76o) !important;
}

#app-page-transition-cover,
#native-page-curtain-v74 {
    background-color: var(--app-light-surface-v76o) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

html[data-theme="dark"] #app-page-transition-cover,
html[data-theme="dark"] #native-page-curtain-v74 {
    background-color: var(--app-dark-surface-v76o) !important;
}

html.is-native-navigating-v76o,
html.is-native-navigating-v76o body,
html.is-page-leaving,
html.is-page-leaving body {
    background-color: var(--app-light-surface-v76o) !important;
}

html[data-theme="dark"].is-native-navigating-v76o,
html[data-theme="dark"].is-native-navigating-v76o body,
html[data-theme="dark"].is-page-leaving,
html[data-theme="dark"].is-page-leaving body {
    background-color: var(--app-dark-surface-v76o) !important;
}

html[data-theme="light"].is-native-navigating-v76o #app-page-transition-cover,
html[data-theme="light"].is-native-navigating-v76o #native-page-curtain-v74,
html[data-theme="light"].is-page-leaving #app-page-transition-cover,
html[data-theme="light"].is-page-leaving #native-page-curtain-v74 {
    opacity: 1 !important;
    transition: none !important;
    background-color: var(--app-light-surface-v76o) !important;
}

html[data-theme="dark"].is-native-navigating-v76o #app-page-transition-cover,
html[data-theme="dark"].is-native-navigating-v76o #native-page-curtain-v74,
html[data-theme="dark"].is-page-leaving #app-page-transition-cover,
html[data-theme="dark"].is-page-leaving #native-page-curtain-v74 {
    opacity: 1 !important;
    transition: opacity 24ms linear !important;
    background-color: var(--app-dark-surface-v76o) !important;
}

@media (max-width: 768px) {
    html[data-theme="light"].is-native-shell,
    html[data-theme="light"].is-native-shell body,
    html[data-theme="light"].is-standalone-app,
    html[data-theme="light"].is-standalone-app body,
    html[data-theme="light"] body.is-app-shell {
        background-color: var(--app-light-surface-v76o) !important;
    }

    html[data-theme="dark"].is-native-shell,
    html[data-theme="dark"].is-native-shell body,
    html[data-theme="dark"].is-standalone-app,
    html[data-theme="dark"].is-standalone-app body,
    html[data-theme="dark"] body.is-app-shell {
        background-color: var(--app-dark-surface-v76o) !important;
    }
}



/* ========================================================================== 
   V76P APP LIGHT FLASH + LOGIN FIT
   - Light Mode darf beim nativen Seitenwechsel nie kurz dunkel vorblitzen.
   - Login-Dialog oben kompakter, unterer Schnell-Login bleibt ruhig.
   ========================================================================== */
html:not([data-theme="dark"]),
html:not([data-theme="dark"]) body {
    background-color: #f6f8fc !important;
    color-scheme: light !important;
}

html:not([data-theme="dark"]) #app-page-transition-cover,
html:not([data-theme="dark"]) #native-page-curtain-v74 {
    background: #f6f8fc !important;
    background-color: #f6f8fc !important;
    transition: none !important;
}

html[data-theme="dark"] #app-page-transition-cover,
html[data-theme="dark"] #native-page-curtain-v74 {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

html.is-page-leaving:not([data-theme="dark"]) body,
html.is-native-navigating-v76o:not([data-theme="dark"]) body,
html.is-native-navigating-v74:not([data-theme="dark"]) body {
    background-color: #f6f8fc !important;
}

@media (max-width: 600px) {
    #auth-modal .modal-content,
    #auth-modal .auth-modal-content {
        width: calc(100vw - 30px) !important;
        max-width: 430px !important;
        max-height: calc(100dvh - 102px) !important;
        padding: 22px 20px 20px !important;
        border-radius: 28px !important;
    }

    #modal-login-view.login-balanced-v76f h3,
    #modal-login-view.login-polish-v76e h3 {
        font-size: clamp(34px, 9.2vw, 38px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1.15px !important;
        margin: 2px 0 8px !important;
        padding-right: 46px !important;
    }

    .login-balanced-v76f .auth-subtitle-v76e,
    .login-polish-v76e .auth-subtitle-v76e {
        font-size: 14.5px !important;
        line-height: 1.28 !important;
        margin-bottom: 12px !important;
        max-width: 94% !important;
    }

    .login-balanced-v76f #login-form .form-group,
    .login-polish-v76e #login-form .form-group {
        margin-bottom: 11px !important;
    }

    .login-balanced-v76f #login-form label,
    .login-polish-v76e #login-form label,
    #auth-modal .form-group label {
        font-size: 10.5px !important;
        letter-spacing: .18em !important;
        line-height: 1.15 !important;
    }

    .login-balanced-v76f #login-form input,
    .login-polish-v76e #login-form input,
    #auth-modal input {
        min-height: 52px !important;
        height: 52px !important;
        border-radius: 17px !important;
        font-size: 15px !important;
    }

    body #modal-login-view #login-form button[type="submit"],
    body #auth-modal #modal-login-view form#login-form > button[type="submit"],
    body #auth-modal #modal-login-view #login-form .btn-primary-auth {
        min-height: 52px !important;
        height: 52px !important;
        border-radius: 17px !important;
        font-size: 15px !important;
        margin-top: 2px !important;
    }

    .login-balanced-v76f .quick-login-balanced-v76f,
    .login-polish-v76e .quick-login-panel-v76e,
    #auth-modal #modal-login-view .social-login-separator {
        margin-top: 13px !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .login-balanced-v76f .auth-provider-btn-v76e,
    .login-balanced-v76f .btn-social-passkey,
    .login-balanced-v76f .btn-social-apple,
    .login-balanced-v76f .btn-social-google,
    .login-polish-v76e .btn-social-passkey,
    .login-polish-v76e .btn-social-apple,
    .login-polish-v76e .btn-social-google {
        min-height: 50px !important;
        font-size: 15px !important;
        border-radius: 16px !important;
    }

    #auth-modal .modal-footer {
        margin-top: 12px !important;
    }
}

@media (max-width: 600px) and (max-height: 760px) {
    #auth-modal .modal-content,
    #auth-modal .auth-modal-content {
        max-height: calc(100dvh - 76px) !important;
        padding-top: 18px !important;
        padding-bottom: calc(114px + env(safe-area-inset-bottom)) !important;
    }

    #modal-login-view.login-balanced-v76f h3,
    #modal-login-view.login-polish-v76e h3 {
        font-size: clamp(31px, 8.4vw, 35px) !important;
        margin-bottom: 6px !important;
    }

    .login-balanced-v76f .auth-subtitle-v76e,
    .login-polish-v76e .auth-subtitle-v76e {
        font-size: 13.5px !important;
        margin-bottom: 10px !important;
    }
}


/* ========================================================================== 
   V76Q APP MARKETPLACE + SOFT PAGE TRANSITION + LOGIN COMPACT
   - Mobile owner/mediated marketplace cards use stable stacked rows.
   - Native app page changes fade softly instead of a hard HTML reload flash.
   - Login headline and password area are more proportional on small phones.
   ========================================================================== */
:root {
    --ipsc-page-surface-v76q: #f6f8fc;
    --ipsc-page-surface-dark-v76q: #0f172a;
}

#app-page-transition-cover,
#native-page-curtain-v74 {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483300 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: var(--ipsc-page-surface-v76q) !important;
    transition: opacity .15s ease !important;
    transform: translate3d(0,0,0) !important;
    will-change: opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

html[data-theme="dark"] #app-page-transition-cover,
html[data-theme="dark"] #native-page-curtain-v74 {
    background: var(--ipsc-page-surface-dark-v76q) !important;
}

html.is-page-leaving #app-page-transition-cover,
html.is-native-navigating-v74 #native-page-curtain-v74,
html.is-native-navigating-v76o #app-page-transition-cover,
html.is-native-navigating-v76o #native-page-curtain-v74 {
    opacity: 1 !important;
    transition: opacity .15s ease !important;
}

@media (max-width: 900px) {
    body {
        animation: ipsc-page-enter-v76q .18s ease-out .03s both;
    }

    html.is-page-leaving body,
    html.is-native-navigating-v74 body,
    html.is-native-navigating-v76o body {
        opacity: .08 !important;
        transition: opacity .15s ease !important;
    }
}

@keyframes ipsc-page-enter-v76q {
    from { opacity: .06; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    body.page-marktplatz .match-card {
        padding: 15px 13px 16px 17px !important;
        padding-right: 13px !important;
        border-radius: 18px !important;
        gap: 12px !important;
    }

    body.page-marktplatz .match-header-flex {
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    body.page-marktplatz .card-avatar,
    body.page-marktplatz .avatar-placeholder-flex {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    body.page-marktplatz .match-card:has(.owner-menu) .match-summary {
        padding-right: 0 !important;
    }

    body.page-marktplatz .match-price-head-v76k {
        font-size: 13.5px !important;
        padding: 7px 10px !important;
        min-width: 86px !important;
        max-width: 112px !important;
        text-align: center !important;
        margin-right: 42px !important;
    }

    body.page-marktplatz .owner-menu {
        top: 15px !important;
        right: 14px !important;
    }

    body.page-marktplatz .owner-menu-trigger {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
        border-color: rgba(255,159,67,.30) !important;
    }

    body.page-marktplatz .card-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
        padding-top: 10px !important;
        border-top: 1px solid var(--border-color) !important;
        align-items: stretch !important;
    }

    body.page-marktplatz .action-buttons-group {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.page-marktplatz .primary-actions {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.page-marktplatz .action-buttons-group.manage-actions .btn-mediated,
    body.page-marktplatz .action-buttons-group .btn-mediated {
        grid-column: 1 / -1 !important;
        min-height: 40px !important;
        height: 40px !important;
        margin-top: 1px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    body.page-marktplatz .btn-contact,
    body.page-marktplatz .btn-contact-want,
    body.page-marktplatz .btn-export,
    body.page-marktplatz .btn-report,
    body.page-marktplatz .btn-delete,
    body.page-marktplatz .btn-edit,
    body.page-marktplatz .btn-mediated {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 10px !important;
        border-radius: 14px !important;
        font-size: 12.7px !important;
        line-height: 1.1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.page-marktplatz .btn-contact-secondary {
        font-size: 12.2px !important;
    }
}

@media (max-width: 600px) {
    #auth-modal .modal-content,
    #auth-modal .auth-modal-content {
        width: calc(100vw - 32px) !important;
        max-width: 418px !important;
        max-height: calc(100dvh - 92px) !important;
        padding: 20px 20px 18px !important;
        border-radius: 27px !important;
    }

    #modal-login-view.login-balanced-v76f h3,
    #modal-login-view.login-polish-v76e h3,
    #auth-modal #modal-login-view h3 {
        font-size: clamp(28px, 7.5vw, 32px) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.8px !important;
        margin: 0 0 8px !important;
        padding-right: 48px !important;
    }

    .login-balanced-v76f .auth-subtitle-v76e,
    .login-polish-v76e .auth-subtitle-v76e,
    #auth-modal #modal-login-view .auth-subtitle-v76e {
        font-size: 13.4px !important;
        line-height: 1.28 !important;
        margin-bottom: 11px !important;
        max-width: 96% !important;
    }

    .login-balanced-v76f #login-form .form-group,
    .login-polish-v76e #login-form .form-group,
    #auth-modal #login-form .form-group {
        margin-bottom: 9px !important;
    }

    .login-balanced-v76f #login-form label,
    .login-polish-v76e #login-form label,
    #auth-modal .form-group label {
        font-size: 9.8px !important;
        letter-spacing: .16em !important;
        line-height: 1.12 !important;
    }

    .login-balanced-v76f #login-form input,
    .login-polish-v76e #login-form input,
    #auth-modal input {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        padding-left: 17px !important;
        padding-right: 17px !important;
    }

    body #modal-login-view #login-form button[type="submit"],
    body #auth-modal #modal-login-view form#login-form > button[type="submit"],
    body #auth-modal #modal-login-view #login-form .btn-primary-auth {
        min-height: 48px !important;
        height: 48px !important;
        border-radius: 16px !important;
        font-size: 14.5px !important;
        margin-top: 1px !important;
    }

    .login-balanced-v76f .quick-login-balanced-v76f,
    .login-polish-v76e .quick-login-panel-v76e,
    #auth-modal #modal-login-view .social-login-separator {
        margin-top: 12px !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .login-balanced-v76f .auth-provider-btn-v76e,
    .login-balanced-v76f .btn-social-passkey,
    .login-balanced-v76f .btn-social-apple,
    .login-balanced-v76f .btn-social-google,
    .login-polish-v76e .btn-social-passkey,
    .login-polish-v76e .btn-social-apple,
    .login-polish-v76e .btn-social-google,
    #auth-modal .btn-social-passkey,
    #auth-modal .btn-social-apple,
    #auth-modal .btn-social-google {
        min-height: 47px !important;
        height: 47px !important;
        font-size: 14px !important;
        border-radius: 15px !important;
    }

    #auth-modal .modal-footer {
        margin-top: 11px !important;
        font-size: 12.5px !important;
    }
}

@media (max-width: 600px) and (max-height: 760px) {
    #auth-modal .modal-content,
    #auth-modal .auth-modal-content {
        max-height: calc(100dvh - 70px) !important;
        padding-top: 17px !important;
        padding-bottom: 17px !important;
    }

    #modal-login-view.login-balanced-v76f h3,
    #modal-login-view.login-polish-v76e h3,
    #auth-modal #modal-login-view h3 {
        font-size: clamp(27px, 7.1vw, 30px) !important;
        margin-bottom: 6px !important;
    }

    .login-balanced-v76f .auth-subtitle-v76e,
    .login-polish-v76e .auth-subtitle-v76e,
    #auth-modal #modal-login-view .auth-subtitle-v76e {
        font-size: 12.8px !important;
        margin-bottom: 9px !important;
    }
}


/* ==========================================================================
   V76R STABLE APP NAV + MARKETPLACE + LOGIN FIT
   - Reverts the experimental colored page-transition curtain from v76q.
   - No white/dark overlay while switching pages; normal HTML navigation is used.
   - Marketplace owner buttons are ordered like the logged-out card plus full-width Vermittelt.
   - Login modal headline and password area are more compact on iPhone.
   ========================================================================== */
#app-page-transition-cover,
#native-page-curtain-v74 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
    animation: none !important;
    background: transparent !important;
}

html.is-page-leaving body,
html.is-native-navigating-v74 body,
html.is-native-navigating-v76o body,
body {
    opacity: 1 !important;
    animation: none !important;
}

html.is-page-leaving #app-page-transition-cover,
html.is-native-navigating-v74 #native-page-curtain-v74,
html.is-native-navigating-v76o #app-page-transition-cover,
html.is-native-navigating-v76o #native-page-curtain-v74 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] body.is-app-shell,
html[data-theme="light"].is-native-shell body,
html[data-theme="light"].is-standalone-app body {
    background-color: #f6f8fc !important;
    color-scheme: light !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.is-app-shell,
html[data-theme="dark"].is-native-shell body,
html[data-theme="dark"].is-standalone-app body {
    background-color: #0f172a !important;
    color-scheme: dark !important;
}

@media (max-width: 768px) {
    body.page-marktplatz .match-card {
        padding: 17px 14px 18px 18px !important;
        padding-right: 14px !important;
        border-radius: 20px !important;
        gap: 13px !important;
    }

    body.page-marktplatz .match-header-flex {
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
    }

    body.page-marktplatz .match-card:has(.owner-menu) .match-summary {
        padding-right: 0 !important;
    }

    body.page-marktplatz .match-price-head-v76k {
        margin-right: 42px !important;
        min-width: 88px !important;
        max-width: 118px !important;
        text-align: center !important;
        font-size: 13.5px !important;
        padding: 7px 10px !important;
    }

    body.page-marktplatz .owner-menu {
        top: 17px !important;
        right: 14px !important;
    }

    body.page-marktplatz .owner-menu-trigger {
        width: 38px !important;
        height: 38px !important;
    }

    body.page-marktplatz .card-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        padding-top: 11px !important;
        border-top: 1px solid var(--border-color) !important;
    }

    body.page-marktplatz .action-buttons-group,
    body.page-marktplatz .action-buttons-group.manage-actions {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.page-marktplatz .action-buttons-group .btn-mediated,
    body.page-marktplatz .action-buttons-group.manage-actions .btn-mediated {
        order: 3 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        margin-top: 1px !important;
        border-radius: 15px !important;
        font-size: 13.5px !important;
        font-weight: 950 !important;
    }

    body.page-marktplatz .primary-actions {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.page-marktplatz .btn-contact,
    body.page-marktplatz .btn-contact-want,
    body.page-marktplatz .btn-export,
    body.page-marktplatz .btn-report,
    body.page-marktplatz .btn-delete,
    body.page-marktplatz .btn-edit,
    body.page-marktplatz .btn-mediated {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 39px !important;
        height: 39px !important;
        padding: 0 9px !important;
        border-radius: 14px !important;
        font-size: 12.6px !important;
        line-height: 1.1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.page-marktplatz .btn-contact-secondary {
        font-size: 12.1px !important;
    }
}

@media (max-width: 600px) {
    #auth-modal .modal-content,
    #auth-modal .auth-modal-content {
        width: calc(100vw - 34px) !important;
        max-width: 410px !important;
        max-height: calc(100dvh - 92px) !important;
        padding: 18px 20px 17px !important;
        border-radius: 27px !important;
    }

    #auth-modal #modal-login-view h3,
    #auth-modal #modal-login-view.login-balanced-v76f h3,
    #auth-modal #modal-login-view.login-polish-v76e h3,
    #modal-login-view.login-balanced-v76f h3,
    #modal-login-view.login-polish-v76e h3 {
        font-size: clamp(24px, 6.4vw, 29px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.65px !important;
        margin: 0 0 7px !important;
        padding-right: 48px !important;
    }

    #auth-modal #modal-login-view .auth-subtitle-v76e,
    .login-balanced-v76f .auth-subtitle-v76e,
    .login-polish-v76e .auth-subtitle-v76e {
        font-size: 12.7px !important;
        line-height: 1.28 !important;
        margin-bottom: 10px !important;
        max-width: 95% !important;
    }

    #auth-modal #login-form .form-group,
    .login-balanced-v76f #login-form .form-group,
    .login-polish-v76e #login-form .form-group {
        margin-bottom: 8px !important;
    }

    #auth-modal .form-group label,
    #auth-modal #login-form label,
    .login-balanced-v76f #login-form label,
    .login-polish-v76e #login-form label {
        font-size: 9.4px !important;
        letter-spacing: .14em !important;
        line-height: 1.08 !important;
    }

    #auth-modal input,
    #auth-modal #login-form input,
    .login-balanced-v76f #login-form input,
    .login-polish-v76e #login-form input {
        min-height: 43px !important;
        height: 43px !important;
        border-radius: 14px !important;
        font-size: 13.5px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body #modal-login-view #login-form button[type="submit"],
    body #auth-modal #modal-login-view form#login-form > button[type="submit"],
    body #auth-modal #modal-login-view #login-form .btn-primary-auth {
        min-height: 45px !important;
        height: 45px !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        margin-top: 0 !important;
    }

    #auth-modal #modal-login-view .social-login-separator,
    .login-balanced-v76f .quick-login-balanced-v76f,
    .login-polish-v76e .quick-login-panel-v76e {
        margin-top: 10px !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }
}


/* ========================================================================== 
   V76R SAFE THEME + MARKETPLACE MOBILE REPAIR
   - Reverts the experimental colored page-transition curtain: no white/dark
     overlay may appear during normal HTML navigation.
   - Keeps the browser desktop shell untouched.
   - Mobile marketplace owner cards get enough height and deterministic rows.
   ========================================================================== */
html,
body {
    background-color: var(--bg-color) !important;
}
html[data-theme="light"],
html[data-theme="light"] body,
html:not([data-theme="dark"]),
html:not([data-theme="dark"]) body {
    background-color: #f6f8fc !important;
    color-scheme: light !important;
}
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #0f172a !important;
    color-scheme: dark !important;
}

#app-page-transition-cover,
#native-page-curtain-v72,
#native-page-curtain-v73,
#native-page-curtain-v74,
#native-page-curtain-v75 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    transition: none !important;
    animation: none !important;
}

html.is-page-leaving body,
html.is-native-navigating-v72 body,
html.is-native-navigating-v73 body,
html.is-native-navigating-v74 body,
html.is-native-navigating-v76o body,
html.is-native-arriving-v72 body,
html.is-native-arriving-v73 body,
html.is-native-arriving-v74 body,
html.is-native-arriving-v76o body {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

@media (max-width: 900px) {
    body {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 768px) {
    body.page-marktplatz .match-card {
        padding: 16px 13px 17px 17px !important;
        min-height: 0 !important;
        overflow: visible !important;
        border-radius: 20px !important;
    }

    body.page-marktplatz .match-header-flex {
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
        align-items: start !important;
    }

    body.page-marktplatz .match-title {
        font-size: 18px !important;
        line-height: 1.13 !important;
    }

    body.page-marktplatz .badge-container {
        gap: 5px !important;
    }

    body.page-marktplatz .match-price-head-v76k {
        min-width: 88px !important;
        max-width: 108px !important;
        margin-right: 42px !important;
        padding: 7px 9px !important;
        font-size: 13.2px !important;
    }

    body.page-marktplatz .owner-menu {
        top: 16px !important;
        right: 14px !important;
    }

    body.page-marktplatz .owner-menu-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 18px !important;
    }

    body.page-marktplatz .card-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 9px !important;
        padding-top: 12px !important;
        margin-top: 10px !important;
        border-top: 1px solid var(--border-color) !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    body.page-marktplatz .primary-actions {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(112px, .78fr) minmax(0, 1.22fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.page-marktplatz .action-buttons-group {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.page-marktplatz .action-buttons-group.manage-actions .btn-mediated,
    body.page-marktplatz .action-buttons-group .btn-mediated {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 41px !important;
        height: 41px !important;
        margin-top: 0 !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        font-weight: 950 !important;
    }

    body.page-marktplatz .btn-contact,
    body.page-marktplatz .btn-contact-want,
    body.page-marktplatz .btn-export,
    body.page-marktplatz .btn-report,
    body.page-marktplatz .btn-delete,
    body.page-marktplatz .btn-edit,
    body.page-marktplatz .btn-mediated {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 9px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
        line-height: 1.08 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    body.page-marktplatz .primary-actions .btn-contact:first-child {
        font-size: 12.6px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    body.page-marktplatz .primary-actions .btn-contact-secondary {
        font-size: clamp(11.2px, 3.05vw, 12.6px) !important;
        letter-spacing: -0.15px !important;
    }
}

@media (max-width: 380px) {
    body.page-marktplatz .primary-actions {
        grid-template-columns: 1fr !important;
    }
    body.page-marktplatz .btn-contact,
    body.page-marktplatz .btn-contact-want,
    body.page-marktplatz .btn-contact-secondary {
        font-size: 13px !important;
    }
}


/* V76R FINAL MOBILE ORDER + LOGIN OVERRIDE
   Keep stable no-overlay navigation; owner card order exactly like logged-out plus mediated under Export/Melden. */
@media (max-width: 768px) {
    body.page-marktplatz .card-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    body.page-marktplatz .action-buttons-group,
    body.page-marktplatz .action-buttons-group.manage-actions {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
    body.page-marktplatz .action-buttons-group .btn-mediated,
    body.page-marktplatz .action-buttons-group.manage-actions .btn-mediated {
        grid-column: 1 / -1 !important;
        order: 3 !important;
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        font-size: 13.8px !important;
    }
    body.page-marktplatz .primary-actions {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(112px, .78fr) minmax(0, 1.22fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    #auth-modal #modal-login-view h3,
    #auth-modal #modal-login-view.login-balanced-v76f h3,
    #auth-modal #modal-login-view.login-polish-v76e h3,
    #modal-login-view.login-balanced-v76f h3,
    #modal-login-view.login-polish-v76e h3 {
        font-size: clamp(23px, 6.1vw, 28px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.6px !important;
        margin-bottom: 6px !important;
    }
    #auth-modal input,
    #auth-modal #login-form input,
    .login-balanced-v76f #login-form input,
    .login-polish-v76e #login-form input {
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        font-size: 13.4px !important;
    }
}


/* ========================================================================== 
   V76S SAFE SAME-SURFACE NAV + MARKETPLACE MOBILE OWNER BUTTON FIX
   - Page-change bridge always uses the CURRENT theme surface, not stale storage.
   - Marketplace owner card keeps Export/Melden, Vermittelt, then chat/contact.
   ========================================================================== */
html[data-theme="light"],
html[data-theme="light"] body {
    background: #f6f8fc !important;
    background-color: #f6f8fc !important;
    color-scheme: light !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color-scheme: dark !important;
}

#ipsc-surface-bridge-v76s {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    will-change: opacity !important;
}

html[data-theme="light"] #ipsc-surface-bridge-v76s { background: #f6f8fc !important; }
html[data-theme="dark"] #ipsc-surface-bridge-v76s { background: #0f172a !important; }

@media (max-width: 768px) {
    body.page-marktplatz .match-card {
        padding: 18px 15px 18px 18px !important;
        border-radius: 21px !important;
        gap: 13px !important;
        min-height: 0 !important;
    }

    body.page-marktplatz .match-header-flex {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
        align-items: start !important;
    }

    body.page-marktplatz .card-avatar,
    body.page-marktplatz .avatar-placeholder-flex {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    body.page-marktplatz .match-title,
    body.page-marktplatz .match-details h3 {
        font-size: 18px !important;
        line-height: 1.13 !important;
        margin: 0 0 5px !important;
    }

    body.page-marktplatz .match-card:has(.owner-menu) .match-summary {
        padding-right: 0 !important;
    }

    body.page-marktplatz .match-price-head-v76k {
        margin-right: 42px !important;
        min-width: 88px !important;
        max-width: 112px !important;
        padding: 7px 9px !important;
        font-size: 13.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.page-marktplatz .owner-menu {
        top: 16px !important;
        right: 14px !important;
    }

    body.page-marktplatz .owner-menu-trigger {
        width: 40px !important;
        height: 40px !important;
        font-size: 17px !important;
    }

    body.page-marktplatz .card-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
        padding-top: 12px !important;
        margin-top: 8px !important;
        border-top: 1px solid var(--border-color) !important;
        overflow: visible !important;
    }

    body.page-marktplatz .action-buttons-group,
    body.page-marktplatz .action-buttons-group.manage-actions {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.page-marktplatz .action-buttons-group .btn-mediated,
    body.page-marktplatz .action-buttons-group.manage-actions .btn-mediated {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        font-weight: 950 !important;
    }

    body.page-marktplatz .primary-actions {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.page-marktplatz .btn-contact,
    body.page-marktplatz .btn-contact-want,
    body.page-marktplatz .btn-export,
    body.page-marktplatz .btn-report,
    body.page-marktplatz .btn-delete,
    body.page-marktplatz .btn-edit,
    body.page-marktplatz .btn-mediated {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 9px !important;
        border-radius: 15px !important;
        font-size: 12.8px !important;
        line-height: 1.08 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    body.page-marktplatz .primary-actions .btn-contact:first-child {
        font-size: 12.4px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    body.page-marktplatz .primary-actions .btn-contact-secondary {
        font-size: clamp(11.3px, 3.02vw, 12.5px) !important;
        letter-spacing: -0.18px !important;
    }
}

@media (max-width: 380px) {
    body.page-marktplatz .primary-actions {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    #auth-modal #modal-login-view h3,
    #auth-modal #modal-login-view.login-balanced-v76f h3,
    #auth-modal #modal-login-view.login-polish-v76e h3,
    #modal-login-view.login-balanced-v76f h3,
    #modal-login-view.login-polish-v76e h3 {
        font-size: clamp(23px, 6vw, 28px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.85px !important;
        margin-bottom: 10px !important;
    }

    #auth-modal #modal-login-view p,
    #modal-login-view.login-balanced-v76f > p,
    #modal-login-view.login-polish-v76e > p {
        font-size: 15px !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
    }

    #auth-modal .form-group label {
        font-size: 11.5px !important;
        letter-spacing: 2.2px !important;
        margin-bottom: 7px !important;
    }

    #auth-modal .form-group input,
    #auth-modal input[type="email"],
    #auth-modal input[type="password"] {
        min-height: 50px !important;
        height: 50px !important;
        padding: 0 18px !important;
        font-size: 15px !important;
        border-radius: 18px !important;
    }
}


/* ========================================================================
   V76T NATIVE APP SHELL + MARKETPLACE OWNER BUTTON SAFETY
   ======================================================================== */
html.ipsc-native-shell-v76t body.page-native-shell {
    background: var(--bg-color) !important;
}
html.ipsc-embedded-native-shell-v76t header,
html.ipsc-embedded-native-shell-v76t #bottom-tab-bar,
html.ipsc-embedded-native-shell-v76t #more-menu-overlay {
    display: none !important;
}
@media (max-width: 768px) {
    body.page-marktplatz .listing-card .market-card-actions,
    body.page-marktplatz .listing-card .listing-actions,
    body.page-marktplatz .market-card .market-card-actions,
    body.page-marktplatz .market-card .listing-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    body.page-marktplatz .listing-card .btn-mediated,
    body.page-marktplatz .listing-card .btn-mark-mediated,
    body.page-marktplatz .listing-card button[onclick*="markAsMediated"],
    body.page-marktplatz .listing-card button[onclick*="mediated"],
    body.page-marktplatz .listing-card button[onclick*="vermittelt"],
    body.page-marktplatz .market-card .btn-mediated,
    body.page-marktplatz .market-card .btn-mark-mediated,
    body.page-marktplatz .market-card button[onclick*="markAsMediated"],
    body.page-marktplatz .market-card button[onclick*="mediated"],
    body.page-marktplatz .market-card button[onclick*="vermittelt"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        text-align: center !important;
    }
    body.page-marktplatz .listing-card .btn-chat,
    body.page-marktplatz .listing-card .btn-contact,
    body.page-marktplatz .listing-card .btn-export,
    body.page-marktplatz .listing-card .btn-report,
    body.page-marktplatz .market-card .btn-chat,
    body.page-marktplatz .market-card .btn-contact,
    body.page-marktplatz .market-card .btn-export,
    body.page-marktplatz .market-card .btn-report {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}


/* V78C App iframe shell: preserve original pages in frames, hide only duplicated chrome. */
html.ipsc-app-frame, html.ipsc-app-frame body {
  background: var(--bg-color, #f6f8fc) !important;
  min-height: 100% !important;
}
html.ipsc-app-frame body {
  padding-top: 0 !important;
  padding-bottom: 18px !important;
  overflow-x: hidden !important;
}
html.ipsc-app-frame #main-header,
html.ipsc-app-frame header#main-header,
html.ipsc-app-frame #bottom-tab-bar,
html.ipsc-app-frame #more-menu-overlay,
html.ipsc-app-frame .main-nav,
html.ipsc-app-frame .bottom-tab-bar,
html.ipsc-app-frame .desktop-only.main-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.ipsc-app-frame .container,
html.ipsc-app-frame main,
html.ipsc-app-frame .page-shell,
html.ipsc-app-frame .app-container {
  max-width: var(--app-max-width, 1120px);
}
body.page-app-spa.app-v78c,
body.page-app-spa.app-v78d {
  overflow: hidden !important;
  height: 100dvh !important;
  padding-bottom: 0 !important;
}
body.page-app-spa.app-v78c #app-shell-root-v78,
body.page-app-spa.app-v78d #app-shell-root-v78,
body.page-app-spa.app-v78e #app-shell-root-v78,
body.page-app-spa.app-v78h #app-shell-root-v78 {
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-color, #f6f8fc) !important;
}
body.page-app-spa.app-v78c #main-header,
body.page-app-spa.app-v78d #main-header,
body.page-app-spa.app-v78e #main-header,
body.page-app-spa.app-v78h #main-header {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 50 !important;
}
body.page-app-spa.app-v78c #app-spa-view-v78,
body.page-app-spa.app-v78d #app-spa-view-v78,
body.page-app-spa.app-v78e #app-spa-view-v78,
body.page-app-spa.app-v78h #app-spa-view-v78 {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  opacity: 1 !important;
}
body.page-app-spa.app-v78c .app-frame-layer-v78c,
body.page-app-spa.app-v78d .app-frame-layer-v78c,
body.page-app-spa.app-v78d .app-frame-layer-v78d,
body.page-app-spa.app-v78e .app-frame-layer-v78c,
body.page-app-spa.app-v78e .app-frame-layer-v78d,
body.page-app-spa.app-v78h .app-frame-layer-v78c,
body.page-app-spa.app-v78h .app-frame-layer-v78d,
body.page-app-spa.app-v78h .app-frame-layer-v78f {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: var(--bg-color, #f6f8fc) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  transition: opacity .14s ease-out !important;
}
body.page-app-spa.app-v78c .app-frame-layer-v78c.is-active,
body.page-app-spa.app-v78d .app-frame-layer-v78c.is-active,
body.page-app-spa.app-v78d .app-frame-layer-v78d.is-active,
body.page-app-spa.app-v78e .app-frame-layer-v78c.is-active,
body.page-app-spa.app-v78e .app-frame-layer-v78d.is-active,
body.page-app-spa.app-v78h .app-frame-layer-v78c.is-active,
body.page-app-spa.app-v78h .app-frame-layer-v78d.is-active,
body.page-app-spa.app-v78h .app-frame-layer-v78f.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}
body.page-app-spa.app-v78c .app-frame-layer-v78c.is-previous,
body.page-app-spa.app-v78d .app-frame-layer-v78c.is-previous,
body.page-app-spa.app-v78d .app-frame-layer-v78d.is-previous,
body.page-app-spa.app-v78e .app-frame-layer-v78c.is-previous,
body.page-app-spa.app-v78e .app-frame-layer-v78d.is-previous,
body.page-app-spa.app-v78h .app-frame-layer-v78c.is-previous,
body.page-app-spa.app-v78h .app-frame-layer-v78d.is-previous,
body.page-app-spa.app-v78h .app-frame-layer-v78f.is-previous {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body.page-app-spa.app-v78c #spa-loader-v78,
body.page-app-spa.app-v78d #spa-loader-v78,
body.page-app-spa.app-v78e #spa-loader-v78,
body.page-app-spa.app-v78h #spa-loader-v78 { display: none !important; }


/* ======================================================================
   V78H APP LOGIN SETTINGS REOPEN FIX
   - keep the v78 frame-shell layout intact
   - fix favorites icon alignment, Marktplatz form sizing, owner price/settings,
     profile click layer, and header restore after modal close.
   ====================================================================== */
body.page-app-spa.app-v78h,
html.is-app-spa-v78h,
html.is-app-spa-v78h body {
  overflow: hidden !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding-bottom: 0 !important;
}
body.page-app-spa.app-v78h #app-shell-root-v78 {
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-color, #f6f8fc) !important;
}
body.page-app-spa.app-v78h #main-header {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 2147482000 !important;
  pointer-events: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.page-app-spa.app-v78h #app-spa-view-v78 {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  z-index: 1 !important;
}
body.page-app-spa.app-v78h .app-frame-layer-v78g,
body.page-app-spa.app-v78h .app-frame-layer-v78f,
body.page-app-spa.app-v78h .app-frame-layer-v78d,
body.page-app-spa.app-v78h .app-frame-layer-v78c {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: var(--bg-color, #f6f8fc) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  transition: opacity .14s ease-out !important;
}
body.page-app-spa.app-v78h .app-frame-layer-v78g.is-active,
body.page-app-spa.app-v78h .app-frame-layer-v78f.is-active,
body.page-app-spa.app-v78h .app-frame-layer-v78d.is-active,
body.page-app-spa.app-v78h .app-frame-layer-v78c.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}
body.page-app-spa.app-v78h .app-frame-layer-v78g.is-previous,
body.page-app-spa.app-v78h .app-frame-layer-v78f.is-previous,
body.page-app-spa.app-v78h .app-frame-layer-v78d.is-previous,
body.page-app-spa.app-v78h .app-frame-layer-v78c.is-previous {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body.page-app-spa.app-v78h #btn-open-settings,
body.page-app-spa.app-v78h #header-avatar,
body.page-app-spa.app-v78h .header-avatar-btn {
  position: relative !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

/* App-frame only: preserve browser website, polish mobile in-app pages. */
@media (max-width: 768px) {
  html.ipsc-app-frame body.page-index .hero-quicklinks-v76 a {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 6px 12px !important;
    min-height: 62px !important;
    padding: 13px 16px !important;
  }
  html.ipsc-app-frame body.page-index .hero-quicklinks-v76 a strong {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
    min-width: 0 !important;
  }
  html.ipsc-app-frame body.page-index .hero-quicklinks-v76 a strong > span:first-child {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    align-self: flex-start !important;
    line-height: 1 !important;
    font-size: 17px !important;
    text-align: left !important;
  }
  html.ipsc-app-frame body.page-index .hero-quicklinks-v76 a > span:last-child {
    text-align: right !important;
    margin: 0 !important;
    align-self: center !important;
    font-size: 13px !important;
  }

  html.ipsc-app-frame body.page-marktplatz .form-section,
  html.ipsc-app-frame body.page-marktplatz .market-form-panel {
    padding: 20px 16px !important;
    border-radius: 24px !important;
  }
  html.ipsc-app-frame body.page-marktplatz .toggle-selector {
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 22px !important;
  }
  html.ipsc-app-frame body.page-marktplatz .toggle-selector label {
    min-height: 62px !important;
    padding: 9px 10px !important;
    gap: 12px !important;
  }
  html.ipsc-app-frame body.page-marktplatz .toggle-selector input[type="radio"] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  html.ipsc-app-frame body.page-marktplatz .toggle-selector span {
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
  }
  html.ipsc-app-frame body.page-marktplatz .form-grid {
    gap: 14px !important;
  }
  html.ipsc-app-frame body.page-marktplatz .form-group {
    margin-bottom: 0 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .form-group label,
  html.ipsc-app-frame body.page-marktplatz label {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    letter-spacing: .11em !important;
    line-height: 1.15 !important;
  }
  html.ipsc-app-frame body.page-marktplatz input:not([type="radio"]):not([type="checkbox"]),
  html.ipsc-app-frame body.page-marktplatz select {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 16px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }
  html.ipsc-app-frame body.page-marktplatz textarea {
    min-height: 104px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  html.ipsc-app-frame body.page-marktplatz .match-card {
    position: relative !important;
    padding: 18px 15px 18px 18px !important;
    overflow: visible !important;
  }
  html.ipsc-app-frame body.page-marktplatz .match-header-flex {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: start !important;
    padding-right: 154px !important;
    position: relative !important;
  }
  html.ipsc-app-frame body.page-marktplatz .match-summary {
    min-width: 0 !important;
    padding-right: 0 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .match-price-head-v76k {
    position: absolute !important;
    top: 18px !important;
    right: 66px !important;
    margin: 0 !important;
    min-width: 96px !important;
    max-width: 112px !important;
    height: 42px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    z-index: 3 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .owner-menu {
    position: absolute !important;
    top: 18px !important;
    right: 15px !important;
    z-index: 5 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .owner-menu-trigger {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}

@media (max-width: 390px) {
  html.ipsc-app-frame body.page-marktplatz .match-header-flex {
    padding-right: 0 !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }
  html.ipsc-app-frame body.page-marktplatz .match-price-head-v76k {
    position: static !important;
    grid-column: 2 !important;
    justify-self: start !important;
    margin-top: 6px !important;
    margin-right: 0 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .owner-menu {
    top: 18px !important;
    right: 15px !important;
  }
}

/* V78H auth reopen + frame-layer compatibility */
body.page-app-spa.app-v78h .app-frame-layer-v78h {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  border: 0 !important; background: var(--bg-color, #f6f8fc) !important; opacity: 0 !important;
  visibility: hidden !important; pointer-events: none !important; transform: translateZ(0) !important;
  transition: opacity .14s ease-out !important;
}
body.page-app-spa.app-v78h .app-frame-layer-v78h.is-active {
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 2 !important;
}
body.page-app-spa.app-v78h .app-frame-layer-v78h.is-previous {
  opacity: 1 !important; visibility: visible !important; pointer-events: none !important; z-index: 1 !important;
}
body.page-app-spa.app-v78h #auth-modal[aria-hidden="true"] { pointer-events: none; }
body.page-app-spa.app-v78h #auth-modal.show,
body.page-app-spa.app-v78h #auth-modal.is-open {
  display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
}


/* ======================================================================
   V78L Endkontrolle Polish
   - Modals above app header, not behind it
   - Auth state in frames, top-scroll on page switch supported by JS
   - Marktplatz card spacing fixed on mobile
   - SG timer button reset and HF Battle Procedure UI
   ====================================================================== */
html.is-app-spa-v78l body.page-app-spa.app-v78l #main-header {
  z-index: 4000 !important;
}
html.is-app-spa-v78l body.page-app-spa.app-v78l #auth-modal,
html.is-app-spa-v78l body.page-app-spa.app-v78l .modal,
html.is-app-spa-v78l body.page-app-spa.app-v78l .modal-overlay,
html.is-app-spa-v78l body.page-app-spa.app-v78l #chat-modal,
html.is-app-spa-v78l body.page-app-spa.app-v78l #global-inbox-modal {
  z-index: 2147483200 !important;
  padding-top: calc(env(safe-area-inset-top) + 18px) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 18px) !important;
}
html.is-app-spa-v78l body.page-app-spa.app-v78l #auth-modal .modal-content,
html.is-app-spa-v78l body.page-app-spa.app-v78l #global-inbox-modal .modal-content,
html.is-app-spa-v78l body.page-app-spa.app-v78l #chat-modal .modal-content {
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 42px) !important;
}
html.ipsc-app-frame #chat-modal,
html.ipsc-app-frame #global-inbox-modal,
html.ipsc-app-frame .modal,
html.ipsc-app-frame .modal-overlay {
  z-index: 2147483000 !important;
  padding-top: 18px !important;
  align-items: center !important;
}
html.ipsc-app-frame #chat-modal .chat-modal-content,
html.ipsc-app-frame #global-inbox-modal .modal-content,
html.ipsc-app-frame .modal-content {
  max-height: calc(100dvh - 36px) !important;
}

/* Marktplatz owner card: reserve space and avoid price/settings overlap */
@media (max-width: 768px) {
  html.ipsc-app-frame body.page-marktplatz .match-card {
    overflow: hidden !important;
    padding: 18px 18px 20px !important;
  }
  html.ipsc-app-frame body.page-marktplatz .match-header-flex {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    padding-right: 0 !important;
    align-items: start !important;
  }
  html.ipsc-app-frame body.page-marktplatz .match-summary {
    grid-column: 2 !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .badge-container {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    padding-right: 0 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .match-price-head-v76k {
    position: static !important;
    grid-column: 2 !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 150px !important;
    min-width: 110px !important;
    height: 42px !important;
    margin: 6px 54px 0 0 !important;
    font-size: 16px !important;
    z-index: 2 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .owner-menu {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 6 !important;
  }
  html.ipsc-app-frame body.page-marktplatz .owner-menu-trigger {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}

/* Hit-Factor Battle: keep stepper rows clean and make room for Procedure */
html.ipsc-app-frame body.page-tools .hit-stepper-grid {
  gap: 14px !important;
}
html.ipsc-app-frame body.page-tools .hit-stepper-card {
  min-width: 0 !important;
}
html.ipsc-app-frame body.page-tools .hit-stepper-card .hit-stepper {
  width: 100% !important;
  box-sizing: border-box !important;
}
html.ipsc-app-frame body.page-tools .overall-note {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Bluetooth fallback: keep action controls readable after blocked WebBluetooth alert */
html.ipsc-app-frame body.page-sg-timer-live #btn-connect,
body.page-sg-timer-live #btn-connect {
  min-width: 150px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}


/* ======================================================================
   V78M Endkontrolle Hotfix
   ====================================================================== */
html.is-app-spa-v78m body.page-app-spa.app-v78m #auth-modal,
html.is-app-spa-v78m body.page-app-spa.app-v78m #chat-modal,
html.is-app-spa-v78m body.page-app-spa.app-v78m #global-inbox-modal,
html.is-app-spa-v78m body.page-app-spa.app-v78m .modal,
html.is-app-spa-v78m body.page-app-spa.app-v78m .modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px) !important;
  pointer-events: auto;
}
html.is-app-spa-v78m body.page-app-spa.app-v78m #auth-modal[aria-hidden="true"] {
  display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
html.is-app-spa-v78m body.page-app-spa.app-v78m #auth-modal .modal-content,
html.is-app-spa-v78m body.page-app-spa.app-v78m #chat-modal .modal-content,
html.is-app-spa-v78m body.page-app-spa.app-v78m #global-inbox-modal .modal-content {
  position: relative !important; z-index: 2147483601 !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 42px) !important;
}
html.is-app-spa-v78m body.page-app-spa.app-v78m .modal-close-container,
html.is-app-spa-v78m body.page-app-spa.app-v78m .modal-close-trigger { z-index: 2147483602 !important; pointer-events: auto !important; }
html.is-app-spa-v78m body.page-app-spa.app-v78m #main-header { z-index: 5000 !important; }
html.is-app-spa-v78m body.page-app-spa.app-v78m #more-menu-list { scroll-behavior: auto !important; }
html.ipsc-app-frame .modal, html.ipsc-app-frame .modal-overlay, html.ipsc-app-frame #chat-modal, html.ipsc-app-frame #global-inbox-modal { align-items: center !important; justify-content: center !important; padding-top: 18px !important; padding-bottom: calc(env(safe-area-inset-bottom) + 18px) !important; }
html.ipsc-app-frame .modal-content, html.ipsc-app-frame #chat-modal .chat-modal-content, html.ipsc-app-frame #global-inbox-modal .modal-content { margin-top: 0 !important; max-height: calc(100dvh - 40px) !important; }

html.ipsc-app-frame body.page-mein-planer .planner-complete-btn, body.page-mein-planer .planner-complete-btn { border: 1px solid rgba(16,185,129,.28) !important; background: rgba(16,185,129,.10) !important; color: #10b981 !important; border-radius: 14px !important; font-weight: 900 !important; padding: 10px 14px !important; min-height: 42px !important; }
html.ipsc-app-frame body.page-mein-planer .planner-complete-btn.is-done, body.page-mein-planer .planner-complete-btn.is-done { background: linear-gradient(135deg,#10b981,#059669) !important; color: #fff !important; border-color: transparent !important; }
html.ipsc-app-frame body.page-mein-planer .planner-stay-details, body.page-mein-planer .planner-stay-details { margin-top: 12px !important; border: 1px solid var(--border-color) !important; border-radius: 16px !important; background: rgba(148,163,184,.06) !important; overflow: hidden !important; }
html.ipsc-app-frame body.page-mein-planer .planner-stay-details summary, body.page-mein-planer .planner-stay-details summary { list-style: none !important; cursor: pointer !important; padding: 12px 14px !important; font-weight: 900 !important; color: var(--text-color) !important; }
html.ipsc-app-frame body.page-mein-planer .planner-stay-details summary::-webkit-details-marker, body.page-mein-planer .planner-stay-details summary::-webkit-details-marker { display: none !important; }
html.ipsc-app-frame body.page-mein-planer .planner-stay-details textarea, body.page-mein-planer .planner-stay-details textarea { width: calc(100% - 28px) !important; margin: 0 14px 14px !important; min-height: 82px !important; border-radius: 14px !important; }
html.ipsc-app-frame body.page-mein-planer .planner-past-block, body.page-mein-planer .planner-past-block { margin-top: 18px !important; border: 1px solid var(--border-color) !important; border-radius: 20px !important; background: var(--card-bg) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden !important; }
html.ipsc-app-frame body.page-mein-planer .planner-past-block summary, body.page-mein-planer .planner-past-block summary { list-style: none !important; padding: 16px 18px !important; font-size: 18px !important; font-weight: 950 !important; cursor: pointer !important; }
html.ipsc-app-frame body.page-mein-planer .planner-past-block summary::-webkit-details-marker, body.page-mein-planer .planner-past-block summary::-webkit-details-marker { display:none !important; }
html.ipsc-app-frame body.page-mein-planer .planner-past-inner, body.page-mein-planer .planner-past-inner { padding: 0 12px 12px !important; }

@media (max-width: 768px) {
  html.ipsc-app-frame body.page-marktplatz .match-card, body.page-marktplatz .match-card { padding: 18px 14px 20px 18px !important; overflow: hidden !important; }
  html.ipsc-app-frame body.page-marktplatz .match-header-flex, body.page-marktplatz .match-header-flex { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 12px !important; row-gap: 8px !important; align-items: start !important; padding-right: 0 !important; }
  html.ipsc-app-frame body.page-marktplatz .match-summary, body.page-marktplatz .match-summary { grid-column: 2 !important; min-width: 0 !important; padding-right: 58px !important; }
  html.ipsc-app-frame body.page-marktplatz .badge-container, body.page-marktplatz .badge-container { padding-right: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; }
  html.ipsc-app-frame body.page-marktplatz .match-price-head-v76k, body.page-marktplatz .match-price-head-v76k { position: static !important; grid-column: 2 !important; justify-self: start !important; align-self: start !important; margin: 8px 62px 0 0 !important; min-width: 116px !important; max-width: calc(100% - 64px) !important; height: 42px !important; font-size: 15px !important; text-align: center !important; z-index: 2 !important; }
  html.ipsc-app-frame body.page-marktplatz .owner-menu, body.page-marktplatz .owner-menu { position: absolute !important; top: 20px !important; right: 16px !important; z-index: 8 !important; }
  html.ipsc-app-frame body.page-marktplatz .owner-menu-trigger, body.page-marktplatz .owner-menu-trigger { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; }
}


/* V78Q Launch Hotfix: planner card actions + cloud accommodation mobile polish */
body.page-mein-planer .planner-card-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 16px !important;
}
body.page-mein-planer .planner-complete-btn {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  height: auto !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
}
body.page-mein-planer .planner-insert-btn,
body.page-mein-planer .planner-delete-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  border-radius: 18px !important;
  padding: 11px 12px !important;
  white-space: nowrap !important;
}
body.page-mein-planer .planner-accommodation-box-v78n {
  margin-top: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.page-mein-planer .planner-accommodation-box-v78n summary {
  min-width: 0 !important;
}
body.page-mein-planer .planner-accommodation-box-v78n summary span:first-child {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
body.page-mein-planer .planner-accommodation-actions-v78n {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
body.page-mein-planer .planner-accommodation-save-v78n {
  width: 100% !important;
  min-height: 46px !important;
}
@media (max-width: 760px) {
  body.page-mein-planer .match-item,
  html.ipsc-app-frame body.page-mein-planer .match-item {
    display: block !important;
    padding: 18px 16px !important;
    overflow: hidden !important;
  }
  body.page-mein-planer .planner-card-actions,
  html.ipsc-app-frame body.page-mein-planer .planner-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    justify-self: stretch !important;
    margin-top: 16px !important;
  }
  body.page-mein-planer .planner-complete-btn,
  html.ipsc-app-frame body.page-mein-planer .planner-complete-btn {
    grid-column: 1 / -1 !important;
    font-size: 15px !important;
  }
  body.page-mein-planer .planner-insert-btn,
  body.page-mein-planer .planner-delete-btn,
  html.ipsc-app-frame body.page-mein-planer .planner-insert-btn,
  html.ipsc-app-frame body.page-mein-planer .planner-delete-btn {
    font-size: 14px !important;
  }
}
@media (min-width: 900px) {
  body.page-mein-planer .match-item {
    grid-template-columns: minmax(0, 1fr) 230px !important;
  }
  body.page-mein-planer .planner-card-actions {
    width: 230px !important;
    grid-template-columns: 1fr !important;
    margin-top: 0 !important;
  }
}