/* ============================================================
   OFF-CANVAS MENU (CSS ONLY / NO JS)
   ============================================================ */

:root {
    /* Breite einstellen */
    --oc-width: 35vw; 
}

@media (max-width: 768px) {
    :root { --oc-width: 85vw; }
}

/* 1. Die Checkbox verstecken */
.oc-checkbox {
    display: none;
}

/* 2. Das Menü (Standard: Versteckt rechts) */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: 0;
    min-width: var(--oc-width);
    max-width: 100vw;
    height: 100vh;    
    
    background-color: var(--bc1);
    border-left: 1px solid var(--vc1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    z-index: 3000;
    
    /* Rausgeschoben */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);

    overflow-y: auto;
}

/* 3. Das Overlay */
.offcanvas-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,0.7);
    z-index: 2999;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}

/* =========================================
   DIE MAGIE (State Control)
   ========================================= */

/* Wenn Checkbox AN ist -> Menü reinholen */
.oc-checkbox:checked ~ .offcanvas-menu {
    transform: translateX(0);
}

/* Wenn Checkbox AN ist -> Overlay zeigen */
.oc-checkbox:checked ~ .offcanvas-overlay {
    opacity: 1;
    visibility: visible;
    /* Optional: Cursor ändern, damit man weiß, man kann klicken */
    cursor: pointer; 
}

/* Body-Scroll verhindern? 
   Das geht mit reinem CSS leider nur über hacks (overflow:hidden auf html/body),
   die aber oft Seiteneffekte haben. 
   Für "No-JS" ist es akzeptabel, wenn der Hintergrund scrollbar bleibt. 
*/

/* 4. Styling des Inhalts (Gleich wie vorher) */
.offcanvas-header {
    padding: 16px;
    border-bottom: 1px solid var(--vc1);
    text-align: right;
}

.offcanvas-content {
    padding: 24px;
    overflow-y: auto;
    height: calc(100% - 60px);
}

.offcanvas-close {
    display: inline-block; /* Wichtig für Label */
    border: 1px solid var(--vc1);
    color: var(--vc1);
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'sonfon', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    border-radius: 0;
    transition: all 0.2s;
    user-select: none;
}

.offcanvas-close:hover {
    background-color: var(--vc1);
    color: var(--bc2);
}

.oc-float-btn {
    /* 1. Positionierung: Festgenagelt am Bildschirm */
    position: fixed;
    z-index: 2900; /* Unter dem Menü (3000), aber über allem Inhalt */
    
    /* WÄHLE DEINE POSITION (Kommentiere aus, was du nicht willst): */
    
    /* VARIANTE A: Unten Rechts (Der Klassiker) */
    bottom: 32px; 
    right: 32px;

    /* VARIANTE B: Oben Rechts (Neben der Navi) */
    /* top: 32px; right: 32px; */
    
    
    /* 2. Das Aussehen (Kreis) */
    width: 64px;
    height: 64px;
    border-radius: 50%;
    
    background-color: var(--bc1); /* Dein Dunkelgrün */
    border: 2px solid var(--vc1); /* Dein Neon-Grün */
    color: var(--vc1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.6); /* Satter Schatten */
    
    /* 3. Inhalt zentrieren (Das Burger-Icon) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-family: 'sonfon', sans-serif; /* Oder Standard */
    font-size: 40px; /* Großes Icon */
    line-height: 1;
    cursor: pointer;
    
    /* 4. Animation beim Drüberfahren */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy Effekt */
}

/* Hover Effekt: Button füllt sich grün */
.oc-float-btn:hover {
    background-color: var(--vc1);
    color: var(--bc2); /* Text wird dunkel */
    transform: scale(1.1) rotate(90deg); /* Wird größer und dreht sich */
    box-shadow: 0 0 25px var(--vc1); /* Neon Glühen */
}