/**
 * Installationsassistent.
 *
 * Eigenes Stylesheet, keine Abhaengigkeit zum Adminbereich: Diese Seiten
 * laufen, bevor Marke, Datenbank und Einstellungen existieren. Sie sollen
 * auch auf einem Hosting lesbar sein, auf dem sonst noch nichts geht.
 *
 * Bewusst nuechtern. Wer hier steht, richtet etwas ein und will sehen, was
 * fehlt - nicht bewundern, wie es aussieht.
 */

:root {
    color-scheme: light dark;

    --ground:  #f6f5f2;
    --surface: #ffffff;
    --sunken:  #eeece6;
    --ink:     #1c1a17;
    --muted:   #635d51;
    --faint:   #8d8577;
    --line:    #dcd7cc;
    --accent:  #7c5f1c;
    --accent-soft: #f1ead8;
    --ok:      #2b6349;
    --ok-soft: #e3efe9;
    --warn:    #8a5712;
    --warn-soft: #f6ecdc;
    --fail:    #8d372a;
    --fail-soft: #f8e7e3;
    --radius:  6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground:  #16150f;
        --surface: #1e1c16;
        --sunken:  #24221a;
        --ink:     #ece7db;
        --muted:   #a49c8a;
        --faint:   #857d6c;
        --line:    #35322a;
        --accent:  #d5b45f;
        --accent-soft: #2b2517;
        --ok:      #6cb492;
        --ok-soft: #1c2721;
        --warn:    #d59f52;
        --warn-soft: #2a2317;
        --fail:    #d67c6c;
        --fail-soft: #2a1d1a;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.shell {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ------------------------------------------------------------- Kopf */

.head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0 1.25rem;
}

.head__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.head__progress {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- Schritte */

.steps { margin-bottom: 1.25rem; }

.steps__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--surface);
    font-size: 0.8rem;
    color: var(--faint);
}

.steps__item.is-done {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
}

.steps__item.is-here {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.steps__mark {
    font-size: 0.75rem;
    line-height: 1;
    min-width: 0.7rem;
}

/* ----------------------------------------------------------- Inhalt */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
}

h1 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    line-height: 1.25;
    text-wrap: balance;
}

h2 {
    margin: 2rem 0 0.6rem;
    font-size: 1.05rem;
    line-height: 1.3;
}

h2:first-of-type { margin-top: 1.4rem; }

p { margin: 0 0 0.9rem; max-width: 42rem; }

.lead {
    color: var(--muted);
    font-size: 1.02rem;
    margin-bottom: 1.4rem;
}

ul, ol { max-width: 42rem; padding-left: 1.2rem; }
li { margin-bottom: 0.35rem; }

code, .mono {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    font-size: 0.88em;
    background: var(--sunken);
    padding: 0.08em 0.32em;
    border-radius: 3px;
    word-break: break-word;
}

pre {
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    overflow-x: auto;
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
}

pre code { background: none; padding: 0; }

a { color: var(--accent); }

a:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------- Meldungen */

.note {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.3rem;
    max-width: 42rem;
}

.note--error { border-left-color: var(--fail); background: var(--fail-soft); }
.note--warn  { border-left-color: var(--warn); background: var(--warn-soft); }
.note--ok    { border-left-color: var(--ok);   background: var(--ok-soft); }

.note p:last-child { margin-bottom: 0; }
.note strong { display: block; margin-bottom: 0.25rem; }

/* ---------------------------------------------------------- Pruefung */

.checks { margin: 0 0 1.6rem; }

.checks__group { margin-bottom: 1.4rem; }

.checks__title {
    margin: 0 0 0.5rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}

.check {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.2rem 0.6rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--line);
}

.check:last-child { border-bottom: 1px solid var(--line); }

.check__mark {
    grid-row: span 2;
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: center;
}

.check--ok   .check__mark { color: var(--ok); }
.check--warn .check__mark { color: var(--warn); }
.check--fail .check__mark { color: var(--fail); }

.check__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    justify-content: space-between;
    align-items: baseline;
}

.check__label { font-weight: 600; font-size: 0.94rem; }

.check__value {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.82rem;
    color: var(--muted);
}

.check__hint {
    grid-column: 2;
    margin: 0;
    font-size: 0.87rem;
    color: var(--muted);
    max-width: 40rem;
}

.check--fail .check__hint { color: var(--fail); }

/* --------------------------------------------------------- Formulare */

.form { margin-top: 1.2rem; }

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 34rem) {
    .grid--two { grid-template-columns: 1fr 1fr; }
    .grid--split { grid-template-columns: 2fr 1fr; }
}

.field { display: flex; flex-direction: column; gap: 0.3rem; }

.field label {
    font-size: 0.9rem;
    font-weight: 600;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="number"],
.field input[type="password"],
.field select {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
}

.field input:disabled { background: var(--sunken); color: var(--muted); }

.hint {
    font-size: 0.84rem;
    color: var(--muted);
    margin: 0;
}

.check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.2rem 0;
}

.check-row input { margin-top: 0.32rem; }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin-top: 1.8rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
}

.button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #ffffff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.button:hover { filter: brightness(1.12); }

.button--quiet {
    background: transparent;
    color: var(--muted);
    border-color: var(--line);
    font-weight: 500;
}

.button--quiet:hover { color: var(--ink); filter: none; }

/* -------------------------------------------------------- Abschluss */

.done { margin: 0 0 1.5rem; padding: 0; list-style: none; max-width: 42rem; }

.done li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--line);
    margin: 0;
}

.done li:last-child { border-bottom: 1px solid var(--line); }

.done__mark { text-align: center; line-height: 1.55; }
.done li.is-ok   .done__mark { color: var(--ok); }
.done li.is-open .done__mark { color: var(--warn); }
.done li.is-open { color: var(--muted); }

.links {
    display: grid;
    gap: 0.8rem;
    margin: 1.4rem 0;
    padding: 0;
    list-style: none;
}

.links li { margin: 0; }

.links a { font-weight: 600; }

.links span {
    display: block;
    font-size: 0.86rem;
    color: var(--muted);
}