/*
====================================================
GLOBAL LAYOUT
Datei: /public/css/layout.css
====================================================
*/



/*
====================================================
HTML / BODY
====================================================
*/

:root {
    --glass-bg: rgba(10,10,25,0.62);
    --glass-border: rgba(255,255,255,0.14);
    --glass-highlight: rgba(255,255,255,0.10);
    --accent: #d4a017;
    --accent-glow: rgba(212,160,23,0.35);
    --text: #f0f0f0;
    --text-dim: rgba(200,200,220,0.65);
    --row-hover: rgba(255,255,255,0.08);
}

html, body {
    margin: 0;
    font-family: 'Barlow', Arial, sans-serif;
}

body {
    background: url('/images/login-bg.png') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;

}

/* PAGE WRAPPER — sichtbare Box zwischen Menü und Footer */
.page-wrapper {
    position: fixed;
    top: 150px;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1600px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;

    background: rgba(10, 10, 25, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.page-wrapper .container {
    width: 100%;
    padding: 0;
	
}
.pages-wrapper {
    position: fixed;
    top: 110px;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1600px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;


    background: rgba(10, 10, 25, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.pages-wrapper .container {
    width: 100%;
    padding: 0;
	
}


/*
====================================================
HAUPTMENÜ
====================================================
*/

.mainnav{

    position:sticky;
    top:0;

    width:100%;

    background:white;

    box-shadow:0 2px 8px rgba(0,0,0,0.2);

    z-index:1000;

}


/*
====================================================
MENÜ INHALT
====================================================
*/

.menuInner{

    max-width:1600px;

    margin:auto;

    padding:10px 20px;

    display:flex;

    align-items:center;

    gap:30px;

}


/*
====================================================
MENÜ LINKS
====================================================
*/

.menuInner a{

    text-decoration:none;

    font-weight:bold;

    color:#333;

}

.menuInner a:hover{

    text-decoration:underline;

}


/*
====================================================
SEITENCONTAINER
====================================================
*/

.container{

    max-width:1600px;

    margin:auto;

    padding:20px;

}


/*
====================================================
BOX DESIGN
====================================================
*/

.box{

    background:white;

    border-radius:6px;

    box-shadow:0 4px 12px rgba(0,0,0,0.25);

    padding:15px;

}


/*
====================================================
FOOTER
====================================================
*/

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    text-align: center;
    font-size: 12px;
    color: #666;

    padding: 10px 0;
    background: rgba(0, 0, 0, 0.6); /* optional */
    backdrop-filter: blur(5px);     /* optional */
}

/*
====================================================
LOGIN ERROR
====================================================
*/

.login-error {

    font-size:40px;

    color:#c0392b;

    background:#fdecea;

    padding:10px;

    border-radius:8px;

    display:inline-block;

}
/* ==================== GLASS BOX ==================== */

.glass-box {
    max-width: 500px;
    margin: 20px auto;

    padding: 20px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* ==================== FORM ==================== */

.search-form {
    display: flex;
    gap: 10px;
}

/* INPUT */

.search-form input {
    flex: 1;

    padding: 10px 15px;

    border-radius: 10px;
    border: none;

    outline: none;

    background: rgba(0,0,0,0.2);
    color: #000;

    backdrop-filter: blur(5px);
}
.search-forme p {
    color: black;
    text-align: center;
    font-weight: bold;
}
/* PLACEHOLDER */

.search-form input::placeholder {
    color: rgba(0,0,0,0.7);
}

/* BUTTON */

.search-form button {
    padding: 10px 15px;

    border-radius: 10px;
    border: none;

    cursor: pointer;

    background: linear-gradient(135deg, #00d9ff, #ff006e);
    color: black;

    font-weight: bold;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-form button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0,217,255,0.6);
}
.glass-boxs {
    max-width: 1400px;
    margin: 20px auto;

    padding: 20px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}