/* ==========================================================
   wok.css — Women of Kurdistan (Complete)
   Modern • Mobile-first • Logo-near palette • With Animations
   Works with your HTML IDs/classes.
   ========================================================== */

/* =========================
   Theme + Motion Tokens
   ========================= */
@font-face {
    font-family: 'wokbold';
    src: url('../font/Oswald-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'wok';
    src: url('../font/Raleway-VariableFont_wght.ttf');
}
:root {
    /* Logo-near palette */
    --bg-main: #f4effc;
    --bg-soft: #fbf9ff;
    --primary: #b58cff;
    --primary-soft: #e7dcff;
    --accent: #f3b6de;
    --text-main: #2f2440;
    --text-muted: #6b5a88;
    --border-soft: rgba(181,140,255,.25);
    --shadow-soft: 0 14px 32px rgba(90,60,140,.12);
    --shadow-card: 0 18px 38px rgba(90,60,140,.14);
    --radius: 18px;
    --radius-lg: 26px;
    --maxw: 1120px;
    /* Motion */
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-soft: cubic-bezier(.2,.8,.2,1);
    --t-fast: 140ms;
    --t-med: 220ms;
    --t-slow: 420ms;
}

/* =========================
   Base / Reset
   ========================= */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'wok';
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    background: radial-gradient(900px 600px at 20% 0%, #e7dcff, transparent 60%), radial-gradient(800px 500px at 90% 20%, #f6d6ea, transparent 60%), linear-gradient(180deg, var(--bg-soft), var(--bg-main));
    background-repeat: no-repeat;
    background-attachment: fixed;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

button, input, select, textarea {
    font: inherit;
}

/* ASP.NET hidden blocks */
.aspNetHidden {
    display: none;
}

/* =========================
   Layout
   ========================= */
.inner {
    width: min(var(--maxw), calc(100% - 24px));
    margin: 0 auto;
    padding: 96px 0 32px;
    /* Entrance animation */
    animation: fadeUp var(--t-slow) var(--ease-out) both;
}

/* =========================
   Banner
   ========================= */
.bannerimg {
    width: 100%;
    margin-top: 72px;
}

    .bannerimg img {
        width: 100%;
        max-height: 360px;
        object-fit: cover;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: var(--shadow-soft);
    }

/* =========================
   Top Buttons
   ========================= */
.hamburger {
    position: fixed;
    top: 14px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255,255,255,.90);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 1100;
    color: var(--text-main);
    transition: transform var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
}

@media (hover:hover) {
    .hamburger:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px rgba(90,60,140,.16);
        background: #fff;
    }
}

.hamburger:active {
    transform: scale(.97);
}

#btnHamburger {
    left: 14px;
}

#btHome {
    left: 66px;
}

#btLogin {
    left: 118px;
}

#btnSearch {
    right: 66px;
}

#btlanguge {
    right: 14px;
}

/* =========================
   Date Badge
   ========================= */
#lbDatum {
    position: fixed;
    top: 14px;
    right: 120px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    z-index: 1000;
    transition: transform var(--t-med) var(--ease-out);
}

@media (hover:hover) {
    #lbDatum:hover {
        transform: translateY(-1px);
    }
}

@media(max-width:420px) {
    #lbDatum {
        top: 64px;
        right: 14px;
    }
}

/* =========================
   Navigator Panel
   ========================= */
.panel-navigator {
    position: fixed;
    top: 72px;
    left: 14px;
    width: min(330px, calc(100% - 28px));
    background: rgba(255,255,255,.92);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(181,140,255,.18);
    padding: 12px;
    display: none;
    z-index: 1050;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform-origin: top left;
}

    /* Menu items */
    .panel-navigator a {
        display: block;
        padding: 14px;
        border-radius: 14px;
        font-weight: 700;
        color: var(--text-main);
        background: rgba(244,239,252,.65);
        margin: 8px 0;
        transition: transform var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
    }

@media (hover:hover) {
    .panel-navigator a:hover {
        transform: translateY(-2px);
        background: var(--primary-soft);
        text-decoration: none;
    }
}

/* =========================
   Search + Language Panels
   ========================= */
#PanelSearch,
#Panellang {
    position: fixed;
    top: 72px;
    right: 14px;
    width: min(560px, calc(100% - 28px));
    padding: 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(181,140,255,.18);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-card);
    display: none;
    z-index: 1050;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform-origin: top right;
}

/* Inputs */
.eingabe {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.input-field {
    flex: 1;
    min-width: 220px;
    width: 100% !important;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(181,140,255,.22);
    background: #fff;
    color: var(--text-main);
    outline: none;
    transition: box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}

    .input-field:focus {
        border-color: rgba(181,140,255,.55);
        box-shadow: 0 0 0 4px rgba(181,140,255,.20);
    }

/* Buttons */
.login-button,
.btn,
.btn-primary {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(181,140,255,.20);
    background: linear-gradient(135deg, rgba(181,140,255,.95), rgba(243,182,222,.85));
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(181,140,255,.18);
    transition: transform var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft), filter var(--t-fast) var(--ease-soft);
}

.btn-ghost {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(181,140,255,.20);
    background: rgba(244,239,252,.9);
    color: var(--text-main);
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
}

@media (hover:hover) {
    .login-button:hover,
    .btn-primary:hover {
        transform: translateY(-2px);
        filter: brightness(1.02);
        box-shadow: 0 16px 30px rgba(181,140,255,.22);
    }

    .btn-ghost:hover {
        transform: translateY(-2px);
        background: var(--primary-soft);
    }
}

.login-button:active,
.btn-primary:active,
.btn-ghost:active {
    transform: scale(.98);
}

/* Language items */
.lang-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(181,140,255,.20);
    background: rgba(244,239,252,.85);
    margin: 6px 6px 0 0;
    transition: transform var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}

@media (hover:hover) {
    .lang-item:hover {
        transform: translateY(-2px);
        background: var(--primary-soft);
        text-decoration: none;
    }
}

.lang-item img {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 4px;
}

/* =========================
   Toggle helper (used by JS)
   ========================= */
.is-open {
    display: block !important;
}

/* Panel open animation (only when opened) */
.panel-navigator.is-open,
#PanelSearch.is-open,
#Panellang.is-open {
    animation: panelIn var(--t-med) var(--ease-out) both;
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================
   Content Grid
   ========================= */
#Post_PanelHomePage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Desktop: 2 columns, .about full width */
@media(min-width:900px) {
    #Post_PanelHomePage {
        grid-template-columns: 1fr 1fr;
    }

    .Ngoname, .about {
        grid-column: 1 / -1;
    }
}

/* =========================
   Content Cards
   ========================= */
.Ngoname,
.about,
.target,
.projekt {
    background: rgba(255,255,255,.92);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(181,140,255,.16);
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}

/* Stagger entrance for cards */
#Post_PanelHomePage > div {
    animation: cardIn 520ms var(--ease-out) both;
}

    #Post_PanelHomePage > div:nth-child(1) {
        animation-delay: 40ms;
    }

    #Post_PanelHomePage > div:nth-child(2) {
        animation-delay: 80ms;
    }

    #Post_PanelHomePage > div:nth-child(3) {
        animation-delay: 120ms;
    }

    #Post_PanelHomePage > div:nth-child(4) {
        animation-delay: 160ms;
    }

    #Post_PanelHomePage > div:nth-child(5) {
        animation-delay: 200ms;
    }

    #Post_PanelHomePage > div:nth-child(6) {
        animation-delay: 240ms;
    }

    #Post_PanelHomePage > div:nth-child(7) {
        animation-delay: 280ms;
    }

    #Post_PanelHomePage > div:nth-child(8) {
        animation-delay: 320ms;
    }

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hover lift + subtle highlight */
@media (hover:hover) {
    .Ngoname:hover,
    .about:hover,
    .target:hover,
    .projekt:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 60px rgba(120,80,180,.18);
        border-color: rgba(181,140,255,.28);
    }
}

/* Soft shimmer on hover (very subtle) */
@keyframes shimmer {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@media (hover:hover) {
    .Ngoname, .about, .target, .projekt {
        position: relative;
        overflow: hidden;
    }

        .Ngoname::before,
        .about::before,
        .target::before,
        .projekt::before {
            content: "";
            position: absolute;
            top: -40%;
            left: -60%;
            width: 45%;
            height: 180%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
            transform: translateX(-120%);
            opacity: 0;
            pointer-events: none;
        }

        .Ngoname:hover::before,
        .about:hover::before,
        .target:hover::before,
        .projekt:hover::before {
            opacity: .9;
            animation: shimmer 900ms var(--ease-out) 1;
        }
}

/* Head card gradient */
.Ngoname {
    background: linear-gradient(135deg, rgba(231,220,255,.95), rgba(246,214,234,.92));
}

    /* Typography inside cards */
    .Ngoname span:first-child {
        display: block;
        font-weight: 800;
        color: var(--text-muted);
        text-align: justify;
        font-family: 'wokbold';
    }

    .Ngoname span:last-child {
        display: block;
        margin-top: 6px;
        font-size: 1.25rem;
        font-weight: 950;
        color: var(--text-main);
        text-align: justify;
    }

.about span:first-child,
.target span:first-child,
.projekt span:first-child {
    display: block;
    font-size: 1.15rem;
    font-weight: 950;
    color: var(--text-main);
    margin-bottom: 12px;
    text-align: justify;
}

.about span:last-child,
.target span:last-child,
.projekt span:last-child {
    display: block;
    color: var(--text-muted);
    width:100%;
    text-align:justify;
}

/* =========================
   Footer
   ========================= */
.footer {
    margin-top: 40px;
    padding: 32px 0;
    background: rgba(255,255,255,.92);
    border-top: 1px solid rgba(181,140,255,.18);
    box-shadow: 0 -18px 45px rgba(90,60,140,.06);
    padding:25px;
}

/* Footer menu links (PanelFooterMenu) */
.footer-menu {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

@media(min-width:700px) {
    .footer-menu {
        grid-template-columns: repeat(3,1fr);
    }
}

.footer-menu a {
    position: relative;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(244,239,252,.85);
    border: 1px solid rgba(181,140,255,.18);
    font-weight: 800;
    color: var(--text-main);
    transition: transform var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}

@media (hover:hover) {
    .footer-menu a:hover {
        transform: translateY(-2px);
        background: var(--primary-soft);
        text-decoration: none;
    }
}

/* Underline reveal */
.footer-menu a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 9px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(181,140,255,.0), rgba(181,140,255,.55), rgba(243,182,222,.45));
    opacity: 0;
    transform: scaleX(.7);
    transform-origin: left;
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}

@media (hover:hover) {
    .footer-menu a:hover::after {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Social icons */
.footer-social {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 12px;
}

    .footer-social a {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(181,140,255,.95), rgba(243,182,222,.90));
        color: white;
        display: grid;
        place-items: center;
        box-shadow: 0 10px 22px rgba(181,140,255,.18);
        transition: transform var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out);
    }

@media (hover:hover) {
    .footer-social a:hover {
        transform: translateY(-3px) scale(1.05);
        filter: brightness(1.02);
        text-decoration: none;
    }
}

.footer-company,
.footer-copyright {
    color: var(--text-muted);
    font-size: 14px;
}

.hansadigital {
    margin-top: 12px;
    width: 180px;
    opacity: .9;
}

/* =========================
   Notification
   ========================= */
.notification {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: min(560px, calc(100% - 24px));
    margin: 0 auto;
    padding: 12px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(181,140,255,.22);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-card);
    z-index: 1200;
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}

    /* If your JS can add is-open, it will animate */
    .notification.is-open {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

#notification-message {
    color: var(--text-main);
}

#close-notification,
.notification .close-btn {
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 22px;
    cursor: pointer;
    float: right;
}

/* =========================
   Privacy Modal
   ========================= */
.privacy-modal {
    position: fixed;
    inset: 0;
    background: rgba(47,36,64,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 1300;
    animation: fadeOverlay 220ms var(--ease-out) both;
}

@keyframes fadeOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.privacy-modal-dialog {
    width: min(680px, 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(181,140,255,.18);
    background: rgba(255,255,255,.95);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    animation: modalIn 320ms var(--ease-out) both;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.privacy-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(181,140,255,.16);
    background: linear-gradient(135deg, rgba(231,220,255,.95), rgba(246,214,234,.92));
}

    .privacy-modal-header h3 {
        margin: 0;
        font-size: 1.05rem;
    }

.icon-button {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(181,140,255,.18);
    background: rgba(255,255,255,.92);
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-soft);
}

@media (hover:hover) {
    .icon-button:hover {
        transform: translateY(-1px);
    }
}

.icon-button:active {
    transform: scale(.98);
}

.privacy-modal-body {
    padding: 14px 16px;
    color: var(--text-muted);
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    margin: 10px 0;
    border-radius: 16px;
    border: 1px solid rgba(181,140,255,.16);
    background: rgba(244,239,252,.75);
}

    .toggle-row strong {
        color: var(--text-main);
    }

    .toggle-row small {
        color: var(--text-muted);
    }

.privacy-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 16px;
    border-top: 1px solid rgba(181,140,255,.16);
}

/* =========================
   Focus Accessibility
   ========================= */
.hamburger:focus-visible,
.login-button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.footer-menu a:focus-visible,
.panel-navigator a:focus-visible,
.lang-item:focus-visible,
.input-field:focus-visible,
.icon-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(181,140,255,.22);
}

/* =========================
   Reduced Motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================
   Keyframes used above
   ========================= */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================
   Images inside content boxes (modern & safe)
   ========================================================== */

/* Common image style for all boxes */
.Ngoname img,
.about img,
.target img,
.projekt img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* IMPORTANT: no distortion */
    object-fit: contain;
    /* Visual style */
    border-radius: 14px;
    margin-bottom: 14px;
    background: linear-gradient( 135deg, rgba(231,220,255,.55), rgba(246,214,234,.55) );
    box-shadow: 0 10px 26px rgba(90,60,140,.14);
    /* Animation-ready */
    transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms cubic-bezier(.16,1,.3,1);
    margin-top:25px;
}



/* Desktop: allow slightly larger images */


/* Optional: image hover effect (very subtle) */
@media (hover:hover) {
    .Ngoname:hover img,
    .about:hover img,
    .target:hover img,
    .projekt:hover img {
        transform: scale(1.02);
        box-shadow: 0 16px 36px rgba(90,60,140,.18);
    }
}

/* If image should be centered (logos, illustrations) */
.Ngoname img,
.about img {
    margin-left: auto;
    margin-right: auto;
}

/* Prevent image from touching card edges */
.Ngoname,
.about,
.target,
.projekt {
    overflow: hidden;
    text-align: justify;
}
    /* Make all spans inside these boxes full width */
    .Ngoname span,
    .about span,
    .target span,
    .projekt span {
        display: block;
        width: 100%;
        max-width: none;
        text-align: justify;
    }

        /* Optional: nicer text flow for long paragraphs */
        .about span:last-child,
        .target span:last-child,
        .projekt span:last-child {
            text-align: left; /* or: justify; */
            word-break: break-word;
            text-align: justify;
        }
/* ==========================================================
   Hamburger Menu — CSS aligned with JS (.active)
   ========================================================== */

/* ==========================================================
   FIX: Hamburger menu must open with JS class ".active"
   ========================================================== */

/* Base state (closed) */
#PanelNavigator.panel-navigator {
    position: fixed;
    top: 72px;
    left: 14px;
    width: min(340px, calc(100% - 28px));
    max-height: calc(100vh - 90px);
    overflow: auto;
    padding: 12px;
    border-radius: 24px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(181,140,255,.22);
    box-shadow: 0 24px 60px rgba(90,60,140,.18);
    z-index: 1200;
    /* IMPORTANT: never use display:none here (JS does not change display) */
    display: block !important;
    /* Hidden via opacity/pointer-events instead */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px) scale(.98);
    transition: opacity 240ms cubic-bezier(.16,1,.3,1), transform 240ms cubic-bezier(.16,1,.3,1);
}

    /* Open state */
    #PanelNavigator.panel-navigator.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    /* Links generated by VB.NET (asp:HyperLink -> <a>) */
    #PanelNavigator.panel-navigator a {
        display: block;
        padding: 14px 16px;
        margin: 8px 0;
        border-radius: 14px;
        background: rgba(244,239,252,.9);
        border: 1px solid rgba(181,140,255,.14);
        color: #2f2440;
        font-weight: 800;
        text-decoration: none;
        transition: transform 180ms cubic-bezier(.16,1,.3,1), background 180ms cubic-bezier(.16,1,.3,1);
    }

@media (hover:hover) {
    #PanelNavigator.panel-navigator a:hover {
        transform: translateY(-2px);
        background: rgba(181,140,255,.22);
    }
}

/* Optional overlay effect (your JS toggles body.overlay-active) */
body.overlay-active::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(47,36,64,.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1100; /* under menu (1200), above page */
}

/* ==========================================================
   PanelSearch as fixed top search bar (next to date)
   ========================================================== */

/* Top bar style (closed state controlled by JS display none/block) */
#PanelSearch {
    position: fixed;
    top: 14px;
    /* Place it near date area (between left buttons and right icons) */
    right: 170px; /* leaves space for search/lang buttons */
    left: 170px; /* leaves space for hamburger/home/login */
    width: auto;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(181,140,255,.22);
    box-shadow: 0 18px 40px rgba(90,60,140,.14);
    z-index: 1250;
    /* JS should toggle display; keep it stable when shown */
    display: none;
}

    /* When JS sets display:block -> play open animation */
    #PanelSearch[style*="display: block"] {
        animation: topBarIn 220ms cubic-bezier(.16,1,.3,1) both;
    }

    /* Layout inside the bar */
    #PanelSearch .eingabe {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
    }

    /* Input in top bar */
    #PanelSearch .input-field {
        width: 100% !important;
        min-width: 0;
        height: 40px;
        padding: 10px 12px;
        border-radius: 999px;
        border: 1px solid rgba(181,140,255,.22);
        background: #fff;
        color: #2f2440;
        outline: none;
    }

    /* Button in top bar */
    #PanelSearch .login-button {
        height: 40px;
        min-width: 56px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgba(181,140,255,.20);
        background: linear-gradient(135deg, rgba(181,140,255,.95), rgba(243,182,222,.85));
        color: #fff;
        font-weight: 900;
        cursor: pointer;
        transition: transform 140ms cubic-bezier(.2,.8,.2,1);
    }

@media (hover:hover) {
    #PanelSearch .login-button:hover {
        transform: translateY(-1px);
    }
}

#PanelSearch .login-button:active {
    transform: scale(.98);
}

/* Animation */
@keyframes topBarIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive: on small screens, use almost full width and move under icons */
@media (max-width: 520px) {
    #PanelSearch {
        top: 66px;
        left: 14px;
        right: 14px;
        border-radius: 22px;
    }
}

/* Keep #lbDatum readable (optional) */
#lbDatum {
    z-index: 1260; /* stay above bar if overlapping; adjust if needed */
}