:root {
    --royal: #2b00d7;
    --royal-2: #19008a;
    --royal-3: #3c13ef;
    --gold: #ffd900;
    --gold-2: #f2bc00;
    --gold-soft: #fff5b8;
    --ink: #130f2b;
    --muted: #655f79;
    --paper: rgba(255, 255, 255, .94);
    --paper-solid: #ffffff;
    --line: rgba(43, 0, 215, .20);
    --line-strong: rgba(43, 0, 215, .42);
    --success: #e7f8e1;
    --error: #ffe3e3;
    --shadow: rgba(25, 0, 138, .18);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 6%, rgba(255, 217, 0, .35), transparent 20rem),
        radial-gradient(circle at 88% 12%, rgba(43, 0, 215, .24), transparent 26rem),
        linear-gradient(135deg, #fffdf0 0%, #f7f3ff 42%, #ece8ff 100%);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    right: max(-170px, -9vw);
    bottom: max(-150px, -8vw);
    width: min(680px, 78vw);
    aspect-ratio: 2048 / 1498;
    background: url("logo.png") center / contain no-repeat;
    opacity: .055;
    filter: saturate(1.1) blur(.2px);
    pointer-events: none;
    z-index: -1;
}

body::after {
    content: "";
    position: fixed;
    inset: auto 0 0 0;
    height: 9px;
    background: linear-gradient(90deg, var(--royal), var(--gold), var(--royal));
    z-index: 5;
}

.topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.25rem);
    padding: .75rem clamp(1rem, 4vw, 3rem);
    background:
        linear-gradient(90deg, rgba(43, 0, 215, .98), rgba(25, 0, 138, .96)),
        var(--royal);
    border-bottom: 4px solid var(--gold);
    box-shadow: 0 14px 34px rgba(19, 15, 43, .18);
}

.brand-logo-link,
.brand-text-link,
a {
    color: inherit;
    text-decoration: none;
}
.brand-logo-link:hover,
.brand-text-link:hover,
a:hover { text-decoration: none; }

.brand-logo {
    display: block;
    width: clamp(52px, 6vw, 74px);
    height: auto;
    max-height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .25));
}

.brand-text { min-width: 0; }
.topbar h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 2.15rem);
    line-height: 1.05;
    letter-spacing: .01em;
}
.topbar h1::after {
    content: "";
    display: block;
    width: min(230px, 58vw);
    height: 3px;
    margin-top: .32rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--gold), rgba(255, 217, 0, 0));
}
.topbar p {
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .88);
    font-weight: 650;
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}
nav span,
nav a {
    border: 1px solid rgba(255, 217, 0, .55);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    padding: .55rem .82rem;
    background: rgba(255, 255, 255, .08);
    line-height: 1;
}
nav a:hover {
    background: var(--gold);
    color: var(--royal-2);
}

main a:not(.button) {
    color: var(--royal);
    font-weight: 800;
}
main a:not(.button):hover { text-decoration: underline; }

.container {
    width: min(100%, 1040px);
    margin: clamp(1rem, 4vw, 2.5rem) auto;
    padding: 0 clamp(.9rem, 3vw, 1.25rem);
}

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 6px solid var(--royal);
    border-radius: clamp(18px, 3vw, 28px);
    padding: clamp(1.1rem, 3vw, 2.15rem);
    box-shadow: 0 20px 54px var(--shadow);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--royal), var(--gold), var(--royal-3));
}
.card::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -95px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 217, 0, .22), transparent 68%);
    pointer-events: none;
}

.narrow { max-width: 540px; margin-inline: auto; }
h2 {
    margin: 0 0 .8rem;
    color: var(--royal-2);
    font-size: clamp(1.45rem, 3.5vw, 2.05rem);
    line-height: 1.15;
}
p { line-height: 1.55; }
label { display: block; margin: 1rem 0; font-weight: 800; }
input[type="text"], input[type="password"], input[type="date"] {
    width: 100%;
    padding: .95rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    font: inherit;
    margin-top: .38rem;
    background: #fff;
    min-height: 46px;
}
input:focus {
    outline: 4px solid rgba(255, 217, 0, .42);
    border-color: var(--royal);
}

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 0;
    background: linear-gradient(135deg, var(--royal), var(--royal-2));
    color: white;
    padding: .92rem 1.3rem;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(43, 0, 215, .25);
}
button:hover, .button:hover {
    background: linear-gradient(135deg, var(--royal-3), var(--royal));
    text-decoration: none;
}
.secondary {
    background: linear-gradient(135deg, var(--ink), var(--royal-2));
}
.secondary:hover { background: var(--ink); }
.ghost {
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: var(--royal-2);
    box-shadow: 0 9px 18px rgba(242, 188, 0, .25);
}
.ghost:hover { background: var(--gold); color: var(--royal-2); }

.choice-form {
    display: grid;
    gap: .9rem;
    margin-top: 1.5rem;
}
.choice {
    display: flex;
    align-items: center;
    gap: .8rem;
    border: 2px solid var(--line);
    border-left: 7px solid var(--gold);
    border-radius: 18px;
    padding: 1rem;
    margin: 0;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(255, 217, 0, .10), #fff 28%);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.choice:hover {
    transform: translateY(-1px);
    border-color: var(--royal);
    box-shadow: 0 10px 22px rgba(43, 0, 215, .10);
}
.choice input { transform: scale(1.2); accent-color: var(--royal); }
.choice span { font-size: 1.1rem; font-weight: 850; }

.notice, .flash {
    border-radius: 16px;
    padding: 1rem;
    margin: 1rem 0;
    border: 1px solid var(--line);
}
.notice {
    background: linear-gradient(90deg, var(--gold-soft), #fff);
    border-color: rgba(242, 188, 0, .55);
}
.flash.success { background: var(--success); }
.flash.error { background: var(--error); }
.flash.info { background: #e9f1ff; }
.hint { color: var(--muted); }

.admin-head, .filter-form {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    flex-wrap: wrap;
}
.filter-form { justify-content: flex-start; margin: 1rem 0; }
.filter-form label { margin: 0; }
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}
th, td {
    padding: .95rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
th {
    background: linear-gradient(135deg, var(--royal), var(--royal-2));
    color: #fff;
    border-bottom: 4px solid var(--gold);
}
tbody tr:nth-child(even) { background: rgba(43, 0, 215, .035); }
tbody tr:hover { background: rgba(255, 217, 0, .12); }
td strong { color: var(--royal); }
footer {
    width: min(100%, 1040px);
    margin: 2rem auto;
    padding: 0 clamp(.9rem, 3vw, 1.25rem) 2.25rem;
    color: var(--muted);
}

@media (max-width: 860px) {
    .topbar {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
    nav {
        grid-column: 1 / -1;
        justify-content: flex-start;
        width: 100%;
    }
    nav a, nav span { padding: .62rem .85rem; }
    .admin-head, .filter-form { align-items: stretch; }
}

@media (max-width: 620px) {
    body::before {
        width: 105vw;
        right: -42vw;
        bottom: 8vh;
        opacity: .045;
    }
    .topbar {
        padding: .75rem .9rem;
        gap: .75rem;
    }
    .brand-logo { width: 52px; max-height: 48px; }
    .topbar h1 { font-size: 1.35rem; }
    .topbar p { font-size: .9rem; }
    nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }
    nav span { grid-column: 1 / -1; }
    nav a, nav span { text-align: center; }
    .container { margin-top: 1rem; }
    .card { padding: 1rem; border-radius: 18px; }
    button, .button { width: 100%; }
    .choice { padding: .95rem; }
    .filter-form { flex-direction: column; }
    .table-wrap { margin-inline: -.2rem; }
}

/* Weiterführende Links nach dem Formular */
.info-links {
    margin-top: clamp(2.6rem, 6vw, 4rem);
    margin-bottom: clamp(1.4rem, 3.5vw, 2.2rem);
    padding: clamp(1.1rem, 3vw, 1.8rem);
    border-radius: clamp(18px, 3vw, 28px);
    border: 1px solid rgba(43, 0, 215, .22);
    border-left: 8px solid var(--gold);
    background:
        linear-gradient(135deg, rgba(43, 0, 215, .07), rgba(255, 217, 0, .17)),
        rgba(255, 255, 255, .95);
    box-shadow: 0 16px 38px rgba(25, 0, 138, .12);
}

.info-link-list {
    margin: 0;
    padding-left: 1.55rem;
    display: grid;
    gap: 1rem;
}

.info-link-list li {
    color: var(--gold-2);
    padding-left: .25rem;
}

.info-link-list li::marker {
    color: var(--gold-2);
    font-size: 1.35em;
}

.info-link {
    color: var(--royal-2);
    font-size: clamp(1.35rem, 3.6vw, 1.9rem);
    line-height: 1.22;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .22em;
    text-decoration-color: var(--gold-2);
}

.info-link:hover {
    color: var(--royal);
    text-decoration-color: var(--royal);
}

@media (max-width: 720px) {
    .info-links {
        margin-top: 2.35rem;
        padding: 1rem;
        border-left-width: 6px;
    }
    .info-link-list {
        gap: .9rem;
        padding-left: 1.3rem;
    }
    .info-link {
        font-size: clamp(1.22rem, 5.2vw, 1.55rem);
    }
}

.brand-story {
    margin-top: clamp(1rem, 3vw, 1.6rem);
    padding: clamp(1.2rem, 3vw, 2rem);
    border-radius: clamp(18px, 3vw, 28px);
    border: 1px solid var(--line);
    border-top: 6px solid var(--gold);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 245, 184, .68)),
        #fff;
    box-shadow: 0 18px 46px rgba(25, 0, 138, .12);
    position: relative;
    overflow: hidden;
}

.brand-story::before {
    content: "";
    position: absolute;
    right: -110px;
    top: -120px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 0, 215, .10), transparent 70%);
    pointer-events: none;
}

.brand-story h1 {
    position: relative;
    margin: 0 0 .75rem;
    color: var(--royal-2);
    font-size: clamp(1.35rem, 3.3vw, 2rem);
    line-height: 1.15;
}

.brand-story h1:not(:first-child) {
    margin-top: 1.4rem;
}

.brand-story h1::after {
    content: "";
    display: block;
    width: min(210px, 58vw);
    height: 4px;
    margin-top: .55rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), rgba(255, 217, 0, 0));
}

.brand-story p {
    position: relative;
    margin: 0 0 .9rem;
    color: var(--ink);
    font-weight: 560;
    line-height: 1.7;
}

@media (max-width: 720px) {
    .info-links {
        grid-template-columns: 1fr;
    }
    .info-link-card {
        min-height: 0;
    }
    .brand-story p {
        line-height: 1.6;
    }
}