/*************************************************************************************/
/*************************************************************************************/
/***********Copyright: Pascal Schuermann (CreaBooSoft 2026)***************************/
/*************************************************************************************/
/***********style.css*****************************************************************/
/*************************************************************************************/
@font-face {
    font-family: RobotoLocal;
    src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    margin:0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

html {
    height:100%;
    width:100%;
    background-color: black;
}

body {
    height:100%;
    width:100%;
    background-color: rgb(40, 40, 40);
    font-family: RobotoLocal, sans-serif;
}


div.page {
    height: 96dvh; /* Etwas kleiner für den Abstand oben/unten */
    width: 100%;
    /* Limits width to a slimmer phone-like aspect ratio (max 9:18) */
    max-width: calc(100vh * (9 / 18));
    /* Prevents getting too skinny on tall screens, but respects window width to prevent "snapping" */
    min-width: min(calc(100vh * (9 / 21)), 100%);
    margin: 2vh auto; /* Stabile vertikale Ränder, zentriert */
    display: flex;
    position: relative;
    flex-direction: column;
    font-size: min(4vmin, 2vh); /* Stabile Basisschriftgröße, skaliert mit Viewport-Dimensionen */
    transition: background-color 2s;

    /* Enables container queries for responsive adjustments based on the page's own size */
    container-type: inline-size;

    border: 4px solid #1a1a1a; /* Fester Rahmen */
    border-radius: min(24px, 3vh); /* Abrundung, die mit der Viewport-Höhe skaliert */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 
                inset 0 0 2px 2px rgba(255, 255, 255, 0.1); /* Fester Schatten */
    background-color: transparent;
}

/* Auf echten Smartphones (schmales Fenster) entfernen wir den Rahmen, um Platz zu sparen */
@media (max-width: 500px) {
    div.page {
        height: 100dvh;
        margin: 0 auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding-top: env(safe-area-inset-top, 0px);
        background-clip: content-box;
    }
}

    .header {
        display: flex;
        flex-direction: column;
        flex:25;
        text-align: center;
        transition: flex 0.3s ease;
    }

    .page.searching .header {
        flex: 30; /* Header wächst, wenn Suche aktiv ist */
    }
    .page.searching .content {
        flex: 55; /* Content schrumpft entsprechend */
    }

            .header_Row_01 {
                display: flex;
                flex: 1;
            }
            .header_Row_02 {
                display: flex;
                flex: 2;
                border:0px solid grey;
                margin: 0px;
                font-size: 5cqw;
                font-weight: bold;
            }
            .header_Row_03 {
                flex: 2;
                position: relative; /* Anker für den absoluten Slider */
                overflow: visible;  /* Verhindert das Abschneiden des großen Slider-Griffs */
            }
                    .slider {
                        appearance: none;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0);
                        outline: none;
                    }
                    
                    .slider::-webkit-slider-thumb {
                        -webkit-appearance: none;
                        appearance: none;
                        width: 4cqw;
                        height: 20cqw;
                        background: rgba(255, 255, 255, 0.5);
                        cursor: pointer;
                        border: 1.5cqw solid black;
                        border-radius: 2.5cqw;
                    }
                    
                    .slider::-moz-range-thumb {
                        width: 4cqw;
                        height: 20cqw;
                        background: rgba(255, 255, 255, 0.5);
                        cursor: pointer;
                        border: 1.5cqw solid black;
                        border-radius: 2.5cqw;
                        border-style: none;
                    }
            
            .header_Row_Search {
                flex: 0;
                width: 100%;
                overflow: hidden;
                transition: flex 0.3s ease;
                background-color: rgba(0, 0, 0, 0.6); /* Weniger transparent */
            }
            
            #shareButton:active,
            #menuButton:active {
                background-color: rgba(255, 255, 255, 0.2) !important;
            }

            .page.searching .header_Row_Search {
                flex: 1.2; /* Sichtbare Höhe der Suchzeile */
            }

            #searchInput {
                width: 90%;
                height: 7cqw;
                border-radius: 0.75cqw;
                border: 0.25cqw solid #ffcc00;
                background-color: white; /* White background */
                color: black; /* Black text color */
                padding: 0 3cqw;
                font-size: 4.5cqw;
                outline: none;
            }
            
            #age_years,
            #age_restmonths,
            #weight,
            #height {
                white-space: nowrap;
                text-shadow: 0 0 1.25cqw rgba(255, 255, 255, 0.6);
            }

            #age_years {
                font-size: 8cqw;
            }

            #age_restmonths {
                font-size: 6cqw;
            }

            #weight {
                font-size: 8cqw;
            }

            #height {
                font-size: 12cqw;
            }
            
            #searchInput::placeholder {
                color: grey;
            }
            

            /* Markierung für den aktiven Such-Button im Header */
            input[id="SEARCH"]:checked + label {
                background-color: #ffcc00 !important;
            }


    .content {
        display: flex;
        flex:60; font-size: 4cqw;
        background-color: rgba(99, 99, 99, 0.2); /* Weniger transparent */
        transition: flex 0.3s ease;
    }
            .content-scroll-container {
                width: 100%;
                height: 100%;
                overflow-x: hidden;
                touch-action: none;
                cursor: grab;
            }
            
            .content-scroll-container.grabbing {
                cursor: grabbing;
                scroll-behavior: auto; /* Disables smooth scrolling during manual drag for better response */
            }

            /* Modern styling for browsers with precise pointers (Desktop/Mouse) */
            @media (pointer: fine) {
                .content-scroll-container {
                    overflow-y: scroll; /* Scrollbar-Bereich auf Desktop immer erzwingen */
                    scrollbar-width: thin;
                    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
                }
                .content-scroll-container::-webkit-scrollbar {
                    width: 1.5cqw;
                }
                .content-scroll-container::-webkit-scrollbar-thumb {
                    background-color: rgba(255, 255, 255, 0.2);
                    border-radius: 2.5cqw;
                }
            }

            /* Hide scrollbar on phones and touch devices */
            @media (pointer: coarse) {
                .content-scroll-container {
                    overflow-y: auto; /* Standard-Verhalten auf Mobile */
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                }
                .content-scroll-container::-webkit-scrollbar {
                    display: none;
                }
            }

    .footer {
        display: flex;
        flex-direction: column;
        flex: 15; font-size: 4cqw;
        text-align: center;
        background-color: rgba(177, 177, 177, 0.4); /* Weniger transparent */
        z-index: 100;
    }

/*******************************************************************/
svg {
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}
/*******************************************************************/
.kategorieButton {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 2.5cqw;
    margin: 0.5cqw;
    color: white;
}
input[name="gruppe"] {
    display: none;
}

input[name="gruppe"] + label {
    border: none !important;
    padding: 0.75cqw;
    border-radius: 2cqw !important;
    transition: all 0.2s ease-in-out;
}

input[name="gruppe"]:checked + label {
    /* Inset box-shadow maintains perfect thickness around corners unlike standard borders */
    box-shadow: inset 0 0 0 0.75cqw #ffcc00, 0 0 2.5cqw rgba(255, 204, 0, 0.5);
    background-color: rgba(255, 204, 0, 0.15) !important;
}

.kategorieDIV {
    width: 100%;
    color: white;
    background-color: rgba(200,200,200,0.4); /* Weniger transparent */
    margin: 0vh auto;
    border-style: none;
    border-radius: 1px;
}
            .kategorieTitelDIV {
                display: flex;
                width: 99%;
                height: 20cqw;
                background-color: rgba(50,50,50,0.7);
                margin: 2cqw auto 0;
                border: 0.5cqw solid darkgray;
                border-radius: 1.25cqw;
                position: relative;
                justify-Content: center;
                align-items: center;
                font-size: 7.2cqw;
                text-shadow: 0.25cqw 0.25cqw 0.25cqw black;
                color: white;
                  
            }
                    .kategorieTitelLinksDIV {
                        height: 16cqw;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 2cqw;
                    }
                    .kategorieTitelRechtsDIV {
                        flex: auto;
                        display: flex;
                        align-items: center;
                        padding: 2cqw;
                    }
            .kategorieInhaltDIV {
                width: 100%;
                height: auto;
                max-Height: 0vh;
                transition: max-height 0.3s;
                display: flex;
                flex-Direction: column;
                align-Items: center;
                justify-Content: center;
            }
.favoritenDIV {
    width: 100%;
    display: flex;
    flex-Direction: column;
    align-Items: center;
}

.favUp, .favDown {
    position: absolute;
    display: none; /* Sichtbarkeit via Checkbox gesteuert */
    align-items: center;
    justify-content: center;
    border-radius: 3cqw;
    top: 50%;
    transform: translateY(-50%);
    height: 12cqw;
    width: 16%;
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffcc00;
    border: 0.5cqw solid #ffcc00;
    cursor: pointer;
    transition: scale 0.2s ease, background-color 0.2s ease;
    z-index: 10;
    padding: 2.4cqw;
}

.favUp:active, .favDown:active {
    scale: 0.9;
    background-color: #ffcc00;
    color: black;
}

.favUp { right: 20cqw; }
.favDown { right: 2cqw; }

.panelDIV {
    display: flex;
    flex-direction: column;
    width: 99%;
    height: auto; /* Weniger transparent */
    background-color: rgba(200,200,200,0.2);
    margin: 0.5cqw 0;
    border-style: outset;
    border-radius: 1.25cqw;
    color:black;
    position: relative;
}

/* Side Menu Modernization */
.side-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: -75cqw;
    width: 75cqw;
    height: 0%; /* Animates to 100% via app.js */
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s ease;
    z-index: 200;
    background-color: #1a1a1a;
    color: white;
    box-shadow: 2.5cqw 0 7.5cqw rgba(0,0,0,0.7);
    border: none;
    font-size: 3cqw;
}

.menu-header {
    background-color: #000;
    display: flex;
    height: 10cqw;
    align-items: center;
    border-bottom: 0.25cqw solid #333;
}

.menu-icon-btn {
    width: 10cqw;
    height: 10cqw;
    background-color: black;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu-title {
    flex: 1;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5cqw;
    font-size: 5cqw;
}

.menu-close-btn-container {
    width: 12.5cqw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-close-btn {
    width: 8.75cqw;
    height: 8.75cqw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Prozent ist bei Kreisen korrekt */
    transition: background-color 0.2s;
}

.menu-close-btn svg {
    width: 5.5cqw;
    height: 5.5cqw;
    stroke-width: 0.75cqw; /* Skalierende Linienstärke für das X */
}

.menu-close-btn:active {
    background-color: rgba(255, 255, 255, 0.2);
}

.menu-content {
    overflow-y: auto;
    flex: 1;
    padding: 5cqw 3.75cqw;
}

.menu-section {
    background-color: #262626;
    padding: 3.75cqw;
    margin-bottom: 5cqw;
    border-radius: 3cqw;
    border: 0.25cqw solid #333;
}

.menu-section-title {
    font-weight: bold;
    color: #ffcc00;
    margin-bottom: 2cqw;
    text-transform: uppercase;
    font-size: 4.5cqw;
    letter-spacing: 0.25cqw;
}

.menu-section hr {
    border: none;
    border-top: 0.25cqw solid #444;
    margin: 2cqw 0 3.75cqw 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 3cqw 0;
    cursor: pointer;
    gap: 2.5cqw;
    font-size: 4.5cqw;
}

.menu-item input {
    width: 5.5cqw;
    height: 5.5cqw;
    accent-color: #ffcc00;
}

.menu-item input[type="radio"] {
    width: 5cqw;
    height: 5cqw;
}

.menu-item input[type="range"] {
    width: auto;
    height: auto;
    flex: 1;
    accent-color: #ffcc00;
}

.menu-info-text {
    font-size: 3.75cqw;
    line-height: 1.6;
    color: #888;
}

/* Search Highlighting */
mark.search-highlight {
    background-color: #ffcc00;
    color: black;
    border-radius: 0.5cqw;
    padding: 0 0.5cqw;
    font-weight: bold;
}

/* Modern custom toast overlay alert replacement */
.custom-toast {
    position: absolute;
    bottom: 24cqw;
    left: 50%;
    transform: translate(-50%, 5cqw);
    width: 90%;
    max-width: 80cqw;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.25cqw solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2.5cqw 7.5cqw rgba(0, 0, 0, 0.5);
    border-radius: 3cqw;
    padding: 4cqw 6cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqw;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: white;
    font-size: 3.2cqw;
}
.custom-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.toast-message {
    flex: 1;
    line-height: 1.4;
}
.toast-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 4.5cqw;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0 1.25cqw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toast-close:hover, .toast-close:active {
    color: #ffcc00;
}

/* Cache/Offline Indicator (Ambulance Glow) */
.status-ready, .status-waiting {
    overflow: visible !important;
    will-change: filter;
    /* Ensure the icon has some "breathing room" for the glow */
    margin: 1.25cqw;
}
.status-ready {
    filter: drop-shadow(0 0 1.25cqw #4CAF50);
    transition: filter 0.5s ease;
}
.status-waiting {
    filter: drop-shadow(0 0 1.25cqw #f44336);
    transition: filter 0.5s ease;
}

/* Disclaimer Overlay Styles */
.disclaimer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 5cqw;
}

.disclaimer-container {
    background-color: #262626;
    color: white;
    width: 100%;
    max-width: 90cqw;
    height: auto; /* Lässt die Höhe vom Inhalt bestimmen */
    max-height: 90%; /* Begrenzt die Höhe auf 90% des Elternelements (Overlay) */
    border-radius: 3.75cqw;
    border: 0.5cqw solid #ffcc00;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 7.5cqw rgba(0,0,0,0.5);
    min-height: 0; /* Allow flex item to shrink properly */
}

.disclaimer-container h2 {
    padding: 3.75cqw;
    text-align: center;
    color: #ffcc00;
    border-bottom: 0.25cqw solid #444;
    margin: 0;
    flex-shrink: 0;
}

.disclaimer-content-scroll {
    padding: 5cqw;
    overflow-y: auto;
    font-size: 3.2cqw;
    line-height: 1.6;
    flex: 1;
    text-align: left;
    min-height: 0; /* Allow scrollable flex item to shrink properly */
    min-height: 25cqw;
}

.disclaimer-footer {
    padding: 3.75cqw;
    border-top: 0.25cqw solid #444;
    display: flex;
    flex-direction: column;
    gap: 3.75cqw;
    flex-shrink: 0; /* Ensures the footer is never compressed or pushed out */
}

.disclaimer-check-label input[type="checkbox"] {
    width: 5cqw;
    height: 5cqw;
    margin: 0;
    flex-shrink: 0;
    accent-color: #ffcc00;
}

.disclaimer-check-label {
    display: flex;
    align-items: center;
    gap: 2.5cqw;
    cursor: pointer;
    font-size: 3.2cqw;
}

.disclaimer-btn {
    background-color: #ffcc00;
    color: black;
    border: none;
    padding: 3cqw;
    border-radius: 2cqw;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.3s;
}

.disclaimer-btn:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
}

/* Pro Features Section */
.menu-purchase-btn {
    background-color: #ffcc00;
    color: #1a1a1a;
    border: 0.25cqw solid rgba(0, 0, 0, 0.1);
    padding: 3cqw 3.75cqw;
    border-radius: 2cqw;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s ease;
    width: 100%;
    text-align: center;
    margin-top: 2.5cqw;
    font-size: 4.5cqw;
    box-shadow: 0 1cqw 0 rgba(0, 0, 0, 0.25);
    position: relative;
    top: 0;
}

.menu-purchase-btn:hover {
    background-color: #e6b800;
}

.menu-purchase-btn:active {
    top: 0.5cqw;
    box-shadow: 0 0.5cqw 0 rgba(0, 0, 0, 0.25);
}

.license-key-input {
    width: 100%;
    padding: 2cqw 2.5cqw;
    margin-top: 1.25cqw;
    border-radius: 1.5cqw;
    border: 0.25cqw solid #555;
    background-color: #333;
    color: white;
    box-sizing: border-box;
}

.license-input-group {
    margin-top: 6.25cqw;
    display: flex;
    flex-direction: column;
    gap: 2cqw;
}

.license-label {
    font-size: 3.75cqw;
    color: #aaa;
    padding-left: 0.5cqw;
}

.license-key-input::placeholder {
    font-size: 3cqw; /* Adjust as needed */
}

/* Pro Locked Feature Styling */
.pro-locked {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: not-allowed !important;
}

/* Strikethrough for Pro Badge when locked */
.pro-badge-locked {
    text-decoration: line-through;
}

/* Pro Active Status Animation */
@keyframes proActivePulse {
    0% { text-shadow: 0 0 1.25cqw lightgreen; opacity: 1; }
    50% { text-shadow: 0 0 3.75cqw lightgreen, 0 0 6.25cqw green; opacity: 0.7; }
    100% { text-shadow: 0 0 1.25cqw lightgreen; opacity: 1; }
}

.pro-active-glow {
    animation: proActivePulse 2s ease-in-out infinite;
    font-weight: bold;
    margin-top: 2.5cqw;
}