/* ===== Trigger (unten links) ===== */
#cookie-trigger{
position: fixed;
bottom: 20px;
left: 20px;
width: 54px;
height: 54px;
background: transparent;
border-radius: 50%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
cursor: pointer;
z-index: 1100;
transition: transform .2s ease-in-out;
}
#cookie-trigger img{
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
#cookie-trigger:hover{ transform: scale(1.08); }

/* Tastatur-Fokus */
#cookie-trigger:focus-visible{
outline: 3px solid rgba(0,55,99,.6);
outline-offset: 3px;
}

/* ===== Overlay ===== */
#cookie-overlay.cc-overlay{
position: fixed;
inset: 0;
display: none;                 /* [hidden] entfernt, JS setzt sichtbar */
align-items: flex-end;         /* Bottom Sheet */
justify-content: center;
background: rgba(0,0,0,.6);
z-index: 1099;
}

/* Sichtbar, wenn hidden entfernt */
#cookie-overlay.cc-overlay:not([hidden]){
display: flex;
}

/* ===== Modal (Bottom Sheet) ===== */
#cookie-modal.cc-modal{
width: min(900px, 92vw);
background: #fff;
/*border-radius: 16px 16px 0 0;*/
box-shadow: 0 10px 40px rgba(0,0,0,.35);
padding: clamp(18px, 2.5vw, 28px);
color: #003763;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

/* Slide in from ~30vh */
transform: translateY(30vh);
animation: cc-slide-up 380ms ease-out forwards;
}

/* optional: große Screens leicht „floaten“ */
@media (min-width: 980px){
    #cookie-modal.cc-modal{
    /*border-radius: 14px;*/
    margin-bottom: 6vh;          /* etwas Luft zum unteren Rand */
    }
}

/* Bewegungsreduktion: keine Animation */
@media (prefers-reduced-motion: reduce){
    #cookie-modal.cc-modal{ animation: none; transform: none; }
}

@keyframes cc-slide-up{
    from{ transform: translateY(30vh); opacity:.96; }
    to  { transform: translateY(0);    opacity:1; }
}

/* ===== Header im Modal ===== */
.cc-title{
    font-family: 'Henriette', serif;
    font-weight: 800;
    color: #003763;
    font-size: clamp(1.4rem, 1.4vw + 1.2rem, 2rem);
    margin: 0 0 .25rem 0;
    line-height: 1.2;
}
.cc-desc{
    margin: 0 0 1rem 0;
    font-size: clamp(0.9rem, .4vw + .85rem, 1rem);
}
.cc-desc a{
    color: #003763;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Schließen-Button */
.cc-close{
    position: absolute;
    top: 8px; right: 10px;
    width: 36px; height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #003763;
    font-size: 28px;
    line-height: 36px;
    cursor: pointer;
}
.cc-close:hover{ background: rgba(0,0,0,.06); }

/* ===== Switches ===== */
.cc-toggles{
    display: grid;
    gap: 12px;
    margin-top: .75rem;
}
.cc-switch{
    --switch-w: 54px;
    --switch-h: 28px;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.cc-switch .cc-switch-text{
    display: grid;
    gap: 2px;
}
.cc-switch .cc-switch-text strong{
    font-weight: 700;
}
.cc-switch .cc-switch-text small{
    font-size: .95em;
    opacity: .85;
}

/* eigentlicher Schalter */
.cc-switch input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cc-slider{
    position: relative;
    width: var(--switch-w);
    height: var(--switch-h);
    border-radius: var(--switch-h);
    background: #cfd8e3;                 /* neutral */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    transition: background .2s ease;
}
.cc-slider::after{
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: calc(var(--switch-h) - 6px);
    height: calc(var(--switch-h) - 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s ease;
}

/* aktiv */
.cc-switch input:checked + .cc-slider{
    background: #003763;
}
.cc-switch input:checked + .cc-slider::after{
    transform: translateX(calc(var(--switch-w) - var(--switch-h)));
}

/* deaktiviert (Essentiell) */
.cc-switch input[disabled] + .cc-slider{
    background: #8aa6bd;
    opacity: .8;
}
.cc-switch input[disabled] + .cc-slider::after{
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Tastaturfokus sichtbar */
.cc-switch:has(input:focus-visible){
    outline: 3px solid rgba(0,55,99,.45);
    outline-offset: 3px;
}

/* ===== Aktionen ===== */
.cc-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 18px;
}
.cc-btn{
    appearance: none;
    border: 2px solid transparent;
    border-radius: 40px;
    padding: 10px 22px;
    font-size: clamp(1rem, .4vw + .95rem, 1.1rem);
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.cc-btn:active{ transform: translateY(1px); }

.cc-btn-primary{
    background: #003763;
    color: #fff;
    border-color: #003763;
}
.cc-btn-primary:hover{
    background: #194b77;
    border-color: #194b77;
}

.cc-btn-ghost{
    background: rgba(0,0,0,.04);
    color: #003763;
    border-color: rgba(0,0,0,.06);
}
.cc-btn-ghost:hover{
    background: rgba(0,0,0,.08);
}

/* ===== Responsiv ===== */
@media (max-width: 640px){
    #cookie-modal.cc-modal{
    width: 94vw;
    padding: 12px;
    margin-bottom:10vh;
    }
    .cc-actions{
        justify-content: center;
    }
}