/* Ashes of Eldoria – Basisstile (Seiten, Formulare, Admin)
   Palette: Asche #14101a · Glut #c98b3d · Pergament #e8dcc3 · Blut #7a2424 · Nebel #8d8aa0 */

:root {
    --ash: #14101a;
    --ash-2: #1f1926;
    --ash-3: #2a2333;
    --ember: #c98b3d;
    --ember-hi: #e8b066;
    --parchment: #e8dcc3;
    --blood: #7a2424;
    --mist: #8d8aa0;
    --ok: #4d7c52;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--ash);
    color: var(--parchment);
    font: 16px/1.55 Georgia, 'Times New Roman', serif;
    min-height: 100vh;
}
a { color: var(--ember-hi); }

.page-center {
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem; min-height: 100vh;
    background-size: cover; background-position: center;
}
.page-center::before {
    content: ''; position: fixed; inset: 0;
    background: radial-gradient(ellipse at center, rgba(20,16,26,.55), rgba(20,16,26,.92));
    pointer-events: none;
}

.panel {
    position: relative; width: 100%; max-width: 420px;
    background: linear-gradient(160deg, var(--ash-2), var(--ash));
    border: 1px solid #3a3146;
    border-top: 2px solid var(--ember);
    padding: 2rem 1.75rem;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.panel-wide { max-width: 560px; }

.brand {
    margin: 0; font-size: 1.9rem; letter-spacing: .08em;
    font-variant: small-caps; color: var(--parchment); text-align: center;
}
.brand-sub {
    margin: .15rem 0 1.5rem; text-align: center;
    color: var(--mist); font-style: italic; font-size: .95rem;
}

h2 { font-size: 1.05rem; font-variant: small-caps; letter-spacing: .06em; color: var(--ember-hi); margin: 1.4rem 0 .4rem; }

label { display: block; margin: .8rem 0; font-size: .9rem; color: var(--mist); }
input {
    display: block; width: 100%; margin-top: .3rem;
    background: #0e0b13; color: var(--parchment);
    border: 1px solid #3a3146; padding: .65rem .75rem;
    font: inherit; border-radius: 2px;
}
input:focus { outline: 2px solid var(--ember); outline-offset: 1px; border-color: var(--ember); }

.btn {
    display: inline-block; cursor: pointer; text-decoration: none;
    background: var(--ash-3); color: var(--parchment);
    border: 1px solid #4a4058; padding: .6rem 1.2rem;
    font: inherit; font-size: .95rem; letter-spacing: .04em;
    border-radius: 2px; transition: background .15s, border-color .15s;
}
.btn:hover, .btn:focus-visible { background: #352c42; border-color: var(--ember); }
.btn-primary { background: linear-gradient(160deg, #a4712f, var(--ember)); border-color: var(--ember-hi); color: #1a1207; font-weight: bold; }
.btn-primary:hover { background: linear-gradient(160deg, var(--ember), var(--ember-hi)); }
.btn-big { font-size: 1.1rem; padding: .85rem 1.8rem; }
button.btn { width: 100%; margin-top: 1.2rem; }
.panel .btn { width: auto; }
.panel form .btn { width: 100%; }

.msg { padding: .7rem .9rem; margin: .7rem 0; font-size: .92rem; border-left: 3px solid; }
.msg-error { background: rgba(122,36,36,.25); border-color: var(--blood); }
.msg-ok { background: rgba(77,124,82,.2); border-color: var(--ok); }
.msg-warn { background: rgba(201,139,61,.15); border-color: var(--ember); }

.checks { list-style: none; padding: 0; margin: 0 0 1rem; }
.checks li { padding: .35rem 0 .35rem 1.6rem; position: relative; color: var(--mist); }
.checks li::before { position: absolute; left: 0; }
.checks li.ok::before { content: '✔'; color: var(--ok); }
.checks li.fail::before { content: '✖'; color: var(--blood); }

.panel-foot { margin-top: 1.4rem; text-align: center; color: var(--mist); font-size: .9rem; }

/* ---- Titelbildschirm ---- */
.title-screen {
    background-size: cover; background-position: center bottom;
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.title-vignette {
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(10,8,14,.75) 90%),
        linear-gradient(to top, rgba(10,8,14,.95), transparent 45%);
}
.title-content { position: relative; text-align: center; padding: 2rem 1.25rem; max-width: 760px; }
.title-eyebrow { letter-spacing: .35em; text-transform: uppercase; font-size: .72rem; color: var(--mist); }
.title-logo {
    margin: .4rem 0 1rem; font-size: clamp(2.6rem, 9vw, 5.2rem);
    font-variant: small-caps; letter-spacing: .06em; line-height: 1;
    color: var(--parchment);
    text-shadow: 0 0 40px rgba(201,139,61,.35), 0 4px 18px rgba(0,0,0,.9);
}
.title-logo span { color: var(--ember); font-size: .55em; vertical-align: middle; }
.title-tag { color: var(--mist); font-style: italic; margin-bottom: 2rem; }
.title-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---- Admin ---- */
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.admin-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; border-bottom: 1px solid #3a3146; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.admin-head h1 { margin: 0; font-variant: small-caps; letter-spacing: .06em; }
.admin-head nav { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.admin-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-tabs a { padding: .45rem .9rem; background: var(--ash-2); border: 1px solid #3a3146; text-decoration: none; color: var(--mist); font-size: .9rem; }
.admin-tabs a.active { border-color: var(--ember); color: var(--parchment); }
table.admin { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.admin th, table.admin td { padding: .5rem .6rem; border-bottom: 1px solid #2c2536; text-align: left; vertical-align: middle; }
table.admin th { color: var(--ember-hi); font-variant: small-caps; letter-spacing: .04em; }
table.admin input { padding: .35rem .5rem; font-size: .85rem; }
table.admin .btn { padding: .35rem .7rem; font-size: .82rem; margin: 0; width: auto; }
.table-scroll { overflow-x: auto; }
@media (max-width: 700px) { table.admin { font-size: .8rem; } }