/* ===== Reset & Basics ===== */

* {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: 'Arial', sans-serif;

    color: #e5f7ff;

    background:

        radial-gradient(circle at top, rgba(0, 255, 170, 0.15), transparent 60%),

        radial-gradient(circle at bottom, rgba(0, 200, 255, 0.15), transparent 60%),

        #050810;

    min-height: 100vh;

}



/* Links allgemein */

a {

    color: #00c8ff;

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}



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

header {

    background: rgba(3, 8, 20, 0.96);

    border-bottom: 1px solid #00ff95;

    box-shadow: 0 0 20px rgba(0, 255, 149, 0.25);

    padding: 15px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: sticky;

    top: 0;

    z-index: 100;

}



header h1 {

    margin: 0;

    font-size: 26px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #00ffbf;

    text-shadow: 0 0 8px rgba(0, 255, 191, 0.6);

}



header nav a {

    color: #e5f7ff;

    margin-left: 20px;

    text-decoration: none;

    font-weight: bold;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1px;

    position: relative;

}



header nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -4px;

    width: 0;

    height: 2px;

    background: linear-gradient(90deg, #00ff95, #00c8ff);

    transition: width 0.2s ease-out;

}



header nav a:hover::after {

    width: 100%;

}



/* ===== Global Container ===== */

.main-container {

    max-width: 1100px;

    margin: 30px auto 60px;

    padding: 0 20px;

}



h2 {

    font-size: 22px;

    margin-bottom: 20px;

    color: #e5f7ff;

    text-shadow: 0 0 6px rgba(0, 200, 255, 0.6);

}



/* ===== Produktliste / Cards ===== */

.product-list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

    gap: 20px;

}



.product-card {

    background: radial-gradient(circle at top left, rgba(0, 255, 149, 0.12), transparent 55%),

                radial-gradient(circle at bottom right, rgba(0, 200, 255, 0.12), transparent 55%),

                rgba(3, 8, 20, 0.96);

    border-radius: 14px;

    padding: 16px 18px;

    border: 1px solid rgba(0, 255, 149, 0.25);

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);

    position: relative;

    overflow: hidden;

    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;

}



.product-card::before {

    content: "";

    position: absolute;

    top: -50%;

    right: -50%;

    width: 120%;

    height: 120%;

    background: radial-gradient(circle, rgba(0, 255, 149, 0.18), transparent 60%);

    opacity: 0;

    transition: opacity 0.2s ease-out;

}



.product-card:hover {

    transform: translateY(-4px);

    border-color: #00ff95;

    box-shadow: 0 0 24px rgba(0, 255, 149, 0.4);

}



.product-card:hover::before {

    opacity: 1;

}



.product-card h3 {

    margin-top: 0;

    margin-bottom: 8px;

    font-size: 18px;

    color: #ffffff;

}



.product-card p {

    margin: 4px 0;

    font-size: 14px;

    color: #b8d8ff;

}



.product-card .price {

    margin-top: 10px;

    font-size: 16px;

    color: #00ffbf;

    font-weight: bold;

}



/* ===== Allgemeine Cards (Admin, Login, etc.) ===== */

.card {

    background: rgba(3, 8, 20, 0.96);

    border-radius: 14px;

    padding: 20px 22px;

    border: 1px solid rgba(0, 200, 255, 0.35);

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.85);

    margin-bottom: 20px;

}



/* ===== Tabellen (Admin Products) ===== */

table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 10px;

    font-size: 14px;

}



th, td {

    padding: 8px 10px;

    border-bottom: 1px solid #12324a;

}



th {

    text-align: left;

    background: rgba(3, 18, 35, 0.95);

    color: #9fc8ff;

}



tr:nth-child(even) td {

    background: rgba(3, 12, 25, 0.9);

}



tr:nth-child(odd) td {

    background: rgba(2, 8, 18, 0.9);

}



tr:hover td {

    background: rgba(0, 255, 149, 0.06);

}



/* ===== Buttons ===== */

button, .btn {

    background: linear-gradient(135deg, #00ff95, #00c8ff);

    border: none;

    padding: 9px 16px;

    border-radius: 999px;

    color: #02101a;

    cursor: pointer;

    font-weight: bold;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1px;

    box-shadow: 0 0 14px rgba(0, 255, 149, 0.4);

    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;

}



button:hover, .btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 0 18px rgba(0, 255, 149, 0.7);

    filter: brightness(1.05);

}



button:disabled, .btn:disabled {

    opacity: 0.6;

    cursor: default;

    box-shadow: none;

}



/* ===== Formulare (Login, Register, Admin Product Form) ===== */

form {

    max-width: 420px;

    margin: 30px auto;

}



form .card {

    margin-bottom: 0;

}



label {

    display: block;

    margin-bottom: 4px;

    font-size: 13px;

    color: #9fc8ff;

}



input, textarea {

    width: 100%;

    padding: 8px 10px;

    margin-bottom: 12px;

    border-radius: 6px;

    border: 1px solid #12324a;

    background: #050c16;

    color: #e5f7ff;

    font-size: 14px;

}



input:focus, textarea:focus {

    outline: none;

    border-color: #00c8ff;

    box-shadow: 0 0 8px rgba(0, 200, 255, 0.5);

}



textarea {

    min-height: 80px;

    resize: vertical;

}



/* kleinere Muted‑Infos (z.B. „nur für Research“) */

.text-muted {

    font-size: 12px;

    color: #7d9bc0;

}



/* ===== Footer (optional) ===== */

footer {

    text-align: center;

    padding: 15px;

    font-size: 12px;

    color: #6f8fb5;

    border-top: 1px solid #081322;

    background: rgba(3, 8, 20, 0.96);

}