/* ═══════════════════════════════════════════════════
   NavalStrike – Cookie-Banner
   Gemeinsam genutzt von beta_gate.php (vorgelagert) und index.php (SPA),
   siehe cookie_banner.php. Entworfen in demo/cookiebanner.html – dort auch
   die Referenz für spätere Anpassungen.
   ═══════════════════════════════════════════════════ */

.cookie-banner {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: rgba(7, 13, 23, 0.6);
    backdrop-filter: blur(3px);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__frame-wrap {
    position: relative;
    width: min(560px, 100%);
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
    animation: cookie-banner-rise 0.5s var(--ease-spring) both;
}

@keyframes cookie-banner-rise {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cookie-banner__frame {
    position: relative;
    width: 100%;
    /* Panel-Sprite ist 1111x613px – feste Ratio, damit das absolut
       positionierte Body-Overlay immer exakt auf dem blauen Innenbereich
       der Rahmengrafik liegt, unabhaengig von der gerenderten Breite. */
    aspect-ratio: 1111 / 613;
    display: block;
}

.cookie-banner__frame-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.cookie-banner__radio {
    position: absolute;
    bottom: 3%;
    left: -1%;
    width: 14%;
    min-width: 52px;
    max-width: 80px;
    z-index: 3;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
    transform-origin: bottom left;
    /* zusaetzlicher Versatz nach unten, damit das Geraet staerker auf dem
       unteren Rahmensteg aufliegt statt vollstaendig im Innenbereich zu
       stehen. */
    translate: 0 25%;
    animation: cookie-banner-radio-hum 4.5s ease-in-out infinite;
}

@keyframes cookie-banner-radio-hum {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-1.2deg); }
}

.cookie-banner__body {
    /* Deckt exakt den blauen Innenbereich der Rahmengrafik ab (Messing-Rand
       vermessen: oben ~6.5%, rechts/links ~5%, unten ~8.5% der Panel-Groesse
       1111x613) statt im normalen Fluss unter dem Bild zu landen. */
    position: absolute;
    inset: 6.5% 5% 8.5%;
    padding: 3%;
    color: var(--text-secondary);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cookie-banner__title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3vw, 1.3rem);
    color: var(--text-primary);
    letter-spacing: 0.01em;
    margin-bottom: 0.6em;
}

.cookie-banner__text {
    font-size: clamp(0.72rem, 1.7vw, 0.86rem);
    line-height: 1.6;
    max-width: 60ch;
    text-align: center;
    align-self: center;
}

.cookie-banner__legal {
    display: block;
    margin-top: 1.6em;
    text-align: center;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.cookie-banner__legal a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner__legal a:hover { color: var(--accent-steel); }

.cookie-banner__legal-note {
    display: inline-block;
    margin-left: 0.5em;
    color: var(--accent-gold);
    animation: cookie-banner-note-in 0.25s var(--ease-out) both;
}
.cookie-banner__legal-note[hidden] { display: none; }

@keyframes cookie-banner-note-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cookie-banner__actions {
    display: flex;
    justify-content: center;
    margin-top: 7%;
}

.cookie-banner__btn {
    position: relative;
    display: block;
    flex: 0 1 auto;
    width: 46%;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s var(--ease-out), filter 0.15s var(--ease-out);
}

.cookie-banner__btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}
.cookie-banner__btn:active {
    transform: translateY(0);
    filter: brightness(0.95);
}
.cookie-banner__btn:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.cookie-banner__btn img {
    display: block;
    width: 100%;
    height: auto;
}

.cookie-banner__btn span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.15em;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: clamp(0.85rem, 2.1vw, 1.05rem);
    line-height: 1;
    letter-spacing: 0.04em;
}

.cookie-banner__btn--accept span {
    color: #f3dfae;
    /* Eingestanzt: enger dunkler Schatten oben schneidet die Vertiefung,
       ein duenner heller Rand direkt darunter faengt das Licht darin –
       traegt den Kontrast durch die Gravur-Wirkung statt durch Fettdruck
       oder reine Helligkeit. */
    text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.85),
        0 1px 0 rgba(255, 241, 199, 0.5);
}

@media (max-width: 480px) {
    .cookie-banner__radio { width: 13%; min-width: 40px; }
}