/* ============================= */
/* Allgemein                     */
/* ============================= */

body {
    background-color: #111615;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}


/* ============================= */
/* Navigation                    */
/* ============================= */

nav {

    position: sticky;
    top: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 22px 60px;

    background: rgba(17,22,21,.88);

    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,.06);

}

.logo{

    font-size:30px;
    font-weight:700;
    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;

}

.logo:hover{

    color:#69F0AE;

}

.menu{

    display:flex;
    gap:35px;

}

.menu a{

    color:#d8d8d8;

    text-decoration:none;

    transition:.25s;

    font-weight:500;

}

.menu a:hover{

    color:#69F0AE;

}

/* ============================= */
/* PLANTR Landing Hero            */
/* ============================= */

.landing-hero {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    padding: 70px 60px;
    background:
        radial-gradient(circle at 20% 20%, rgba(105, 240, 174, .16), transparent 32%),
        radial-gradient(circle at 80% 30%, rgba(168, 85, 247, .18), transparent 34%);
}

.hero-card {
    max-width: 820px;
    padding: 54px;
    border-radius: 34px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
}

.eyebrow {
    color: #69F0AE;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hero-card h1 {
    font-size: 68px;
    line-height: 1.02;
    margin: 18px 0;
}

.hero-subtitle {
    max-width: 620px;
    color: #d6d6d6;
    font-size: 20px;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 18px;
    margin-top: 36px;
}

.btn {
    padding: 15px 24px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
}

.btn.primary {
    background: linear-gradient(135deg, #69F0AE, #A855F7);
    color: #111615;
}

.btn.secondary {
    border: 1px solid rgba(255,255,255,.20);
    color: white;
}

/* ==========================================================
🌱 PLANTR
Bereich: User Menu
Zweck: Dropdown-Menü für eingeloggte Benutzer im Header
========================================================== */

.menu {
    display: flex;
    align-items: center;
    gap: 24px;
}

.user-menu {
    position: relative;
    display: inline-block;
}

.user-menu summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
}

.user-menu summary::-webkit-details-marker {
    display: none;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 10px;
    background: #101814;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    z-index: 100;
}

.user-menu-dropdown a {
    display: block;
    padding: 9px 10px;
    white-space: nowrap;
}



/* ==========================================================
   🌱 PLANTR

   Datei : static/css/style.css
   Bereich: Consent Banner
   Zweck : Zeigt den Consent-Banner als modales Overlay
   ========================================================== */

   .consent-banner {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: min(560px, calc(100% - 32px));
    height: fit-content;
    margin: auto;
    padding: 28px;

    background: #111814;
    border: 1px solid #33413a;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.consent-banner::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.consent-banner h2 {
    margin-top: 0;
}

.consent-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.consent-banner-actions form {
    margin: 0;
}

.consent-banner-actions button,
.consent-banner-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 18px;

    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 640px) {
    .consent-banner {
        width: calc(100% - 24px);
        padding: 22px;
    }

    .consent-banner-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .consent-banner-actions button,
    .consent-banner-actions a {
        width: 100%;
    }
}