/* Cookie Banner Styles */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    z-index: 10000;
    padding: 24px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none; /* Initially simplified to avoid blocking interaction if JS fails, JS will enable pointer-events */
}

.cookie-banner.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 900px) {
    .cookie-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .cookie-text {
        flex: 1;
        padding-right: 40px;
    }

    .cookie-actions {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
    }
}

.cookie-text h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.cookie-text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4a4a4a;
}

.cookie-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

@media (min-width: 900px) {
    .cookie-actions {
        align-items: flex-end;
    }
}

.cookie-buttons {
    display: flex;
    gap: 12px;
}

.cookie-link {
    font-size: 0.85rem;
    color: #666;
    text-decoration: underline;
    transition: color 0.2s;
}

.cookie-link:hover {
    color: #000;
}

.cookie-btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cookie-btn-primary {
    background-color: #2c3e50;
    color: white;
    box-shadow: 0 4px 6px rgba(44, 62, 80, 0.2);
}

.cookie-btn-primary:hover {
    background-color: #1a252f;
    transform: translateY(-1px);
    box-shadow: 0 6px 8px rgba(44, 62, 80, 0.25);
}

.cookie-btn-outline {
    background-color: transparent;
    border: 1px solid #ccc;
    color: #555;
}

.cookie-btn-outline:hover {
    border-color: #999;
    background-color: rgba(0,0,0,0.02);
    color: #333;
}

/* Mobile scaling fix for non-responsive tools (viewport width >= 1200px) 
   Compensates for the browser's "zoom out" on mobile devices. */
/* NACHTRAG 25.08.2026 — «and (min-width: 900px)» ist neu.
   max-device-width fragt nach der Groesse des GERAETS. Auf einem iPhone
   traf der Block deshalb auch auf Seiten zu, die sich richtig anpassen
   (width=device-width), und der Banner stand dort mit 4rem Schrift und
   60 Pixel Innenabstand — auf beiden Handbuechern, auf parodont, auf den
   perio-tools-Seiten und in der Risikoabschaetzung.
   min-width fragt nach der Breite der SEITE. Ein Werkzeug mit festem
   Bildbereich hat auf dem Telefon 1340 Pixel, eine sich anpassende Seite
   390. Die zusaetzliche Bedingung trifft also genau die acht Werkzeuge,
   fuer die der Block gedacht war — idra, pra, mundhygiene-instruktion,
   oralhygiene-instruction, spt —, und keine der zwoelf uebrigen. */
@media screen and (max-device-width: 768px) and (min-width: 900px) {
    .cookie-banner {
        padding: 10px !important;
        display: block !important;
    }

    .cookie-container {
        max-width: 100% !important;
        padding: 60px !important;
        gap: 40px !important;
        flex-direction: column !important;
    }

    .cookie-text h3 {
        font-size: 4rem !important;
        margin-bottom: 40px !important;
        line-height: 1.2 !important;
        margin-top: 20px !important;
    }

    .cookie-text p {
        font-size: 3.4rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px;
    }

    .cookie-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 30px !important;
    }

    .cookie-buttons {
        gap: 24px !important;
        width: 50% !important;
        display: flex !important;
        flex-direction: row !important;
    }

    .cookie-btn {
        padding: 35px 0 !important;
        font-size: 3rem !important;
        border-radius: 25px !important;
        flex: 1 !important;
        text-align: center !important;
        border: 2px solid #ccc;
        /* box-shadow: 0 5px 15px rgba(44, 62, 80, 0.2); */
    }

    .cookie-link {
        font-size: 3.2rem !important;
        margin-top: 30px !important;
        display: inline-block !important;
        align-self: flex-start !important;
        margin-bottom: 35px !important;
    }
}