/*
 * theme.css — das Aussehen von einmalpost.
 *
 * Diese Datei liegt NICHT im Repository (.gitignore). Wer einmalpost klont,
 * bekommt die schmucklose, vollständig bedienbare Fassung aus
 * theme-default.css. Alles, was das Verhalten betrifft, ist einsehbar; nur
 * das Aussehen nicht.
 *
 * Farben, Radien und Schriften stammen aus "Einmalpost Mockups.dc.html".
 *
 * Keine externe Ressource. Die Schriften liegen unter /assets/fonts/ im
 * eigenen Projekt - kein Google Fonts, kein CDN. Die CSP mit
 * default-src 'none' würde Fremdes ohnehin blockieren; der Punkt ist, dass
 * es gar nicht erst versucht wird.
 */

/* --- Schriften: Barlow, SIL Open Font License 1.1 -------------------- */

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/barlow-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');
}

/* --- Farben ----------------------------------------------------------
 *
 * Grundfassung ist hell. Das dunkle Schema folgt der Systemeinstellung -
 * kein Umschalter: Der bräuchte Speicher im Browser, und den eröffnen wir
 * für Kosmetik nicht.
 */

:root {
    --grund:          #FAF8F2;
    --flaeche:        #FFFFFF;
    --flaeche-still:  #ECEAE3;
    --linie:          #D9D4C7;
    --text:           #141B2E;
    /* Gedämpft, aber nicht blass: 4,9:1 gegen den Grund. */
    --text-still:     #55606F;
    --akzent:         #8C5D06;
    --akzent-stark:   #6E4905;
    --akzent-text:    #FFFFFF;
    --warnung-grund:  #FDF3DC;
    --warnung-linie:  #B07508;
    --ok-grund:       #E9F1E9;
    --ok-linie:       #2E6B34;
    --fehler-grund:   #FBEAEA;
    --fehler-linie:   #A32020;

    --radius:         8px;
    --radius-klein:   6px;
    --radius-pille:   99px;

    --schrift:        'Barlow', system-ui, -apple-system, sans-serif;
    --schrift-eng:    'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --schrift-fest:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund:          #141B2E;
        --flaeche:        #1B2440;
        --flaeche-still:  #212B4A;
        --linie:          #2E3A5C;
        --text:           #FAF8F2;
        /* 7,0:1 gegen den dunklen Grund. */
        --text-still:     #A9B4C8;
        --akzent:         #F5A81C;
        --akzent-stark:   #FFC257;
        --akzent-text:    #141B2E;
        --warnung-grund:  #2E2409;
        --warnung-linie:  #F5A81C;
        --ok-grund:       #12261A;
        --ok-linie:       #6FCF85;
        --fehler-grund:   #2A1215;
        --fehler-linie:   #FF8A80;
    }
}

/* --- Grundlagen ------------------------------------------------------ */

body {
    font-family: var(--schrift);
    color: var(--text);
    background: var(--grund);
}

::selection { background: var(--akzent); color: var(--akzent-text); }

a { color: var(--akzent); }
a:hover { color: var(--akzent-stark); }

/* Fokus muss sichtbar bleiben - wer mit der Tastatur bedient, sieht sonst
   nicht, wo er ist. */
:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Kopf und Fuß ---------------------------------------------------- */

.site-header { padding-top: 1.5rem; padding-bottom: 0.5rem; }

.brand {
    display: inline-flex;
    align-items: center;
    /* Kein gap: Das stünde auch zwischen EINMAL und POST, und die
       Wortmarke ist bewusst zusammengeschrieben. Den Abstand trägt
       allein die Bildmarke. */
    font-family: var(--schrift-eng);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
}

/* Die Bildmarke: dieselbe Kachel wie das Favicon. Im dunklen Schema
   verschmilzt die Kachel mit dem Grund - dann stehen Umschlag und Siegel
   frei, das ist gewollt. */
.brand__mark { display: block; width: 30px; height: 30px; margin-right: 0.6rem; }

.brand__part--second { color: var(--akzent); }

.site-footer {
    border-top: 1px solid var(--linie);
    margin-top: 2rem;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
    color: var(--text-still);
}

.site-footer__link { color: var(--text-still); text-decoration: underline; }
.site-footer__link:hover { color: var(--akzent); }

/* Der Verweis auf den Quellcode trägt sein Zeichen mit. Es färbt sich über
   currentColor mit dem Text und braucht keine eigene Farbangabe. */
.site-footer__link--mit-symbol {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration-thickness: from-font;
}

.symbol {
    flex: none;
    width: 1.05em;
    height: 1.05em;
    /* Optischer Ausgleich: Das Zeichen sitzt sonst zu hoch auf der Grundlinie. */
    transform: translateY(0.03em);
    transition: transform 0.15s ease;
}

.site-footer__link--mit-symbol:hover .symbol { transform: translateY(0.03em) scale(1.12); }

/* --- Überschriften --------------------------------------------------- */

.hero__title,
.state__title,
.prose__title,
.steps__title,
.faq__title,
.result__title {
    font-family: var(--schrift-eng);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
}

.hero__title { font-size: clamp(1.75rem, 6vw, 2.75rem); margin-bottom: 0.5rem; }
.hero__lead { font-size: clamp(1rem, 3.5vw, 1.1875rem); color: var(--text-still); max-width: 34rem; }
.state__title { font-size: clamp(1.25rem, 5vw, 1.75rem); }
.prose__title { font-size: clamp(1.5rem, 5vw, 2rem); }
.steps__title, .faq__title { font-size: 1.375rem; margin-top: 2.5rem; }
.result__title { font-size: 1.125rem; }

.prose h2 {
    font-family: var(--schrift-eng);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 1.1875rem;
    margin-top: 2rem;
}

/* --- Merkmale -------------------------------------------------------- */

.badge {
    font-family: var(--schrift-eng);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.09em;
    border: 1px solid var(--linie);
    border-radius: var(--radius-pille);
    padding: 0.3rem 0.8rem;
    color: var(--text-still);
    background: var(--flaeche);
}

/* --- Karten ---------------------------------------------------------- */

.card {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.25rem;
}

@media (min-width: 40rem) {
    .card { padding: 1.75rem; }
}

/* --- Formular -------------------------------------------------------- */

.field__label {
    font-family: var(--schrift-eng);
    font-weight: 600;
    letter-spacing: 0.09em;
    color: var(--text-still);
}

.field__input {
    background: var(--grund);
    color: var(--text);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    padding: 0.7rem 0.8rem;
}

.field__input:focus { border-color: var(--akzent); }

/* Der Platzhaltertext war im Entwurf zu blass. Angehoben auf denselben
   Wert wie der gedämpfte Fließtext - Lesbarkeit gewinnt gegen die Vorlage. */
.field__input::placeholder { color: var(--text-still); opacity: 1; }

.field__input--area { font-family: var(--schrift-fest); font-size: 0.9375rem; }

.btn {
    font-family: var(--schrift-eng);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.09em;
    border-radius: var(--radius-pille);
    border: 1px solid transparent;
    padding: 0.7rem 1.4rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--primary { background: var(--akzent); color: var(--akzent-text); }
.btn--primary:hover:not(:disabled) { background: var(--akzent-stark); }

.btn--secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--linie);
}

.btn--secondary:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }

/* --- Code, Link, Geheimnis ------------------------------------------- */

.code {
    font-family: var(--schrift-fest);
    font-size: 0.9375rem;
    background: var(--flaeche-still);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    padding: 0.75rem;
    color: var(--text);
}

.code--secret { font-size: 1rem; line-height: 1.5; }

/* --- Hinweise -------------------------------------------------------- */

.notice {
    border-radius: var(--radius-klein);
    border: 1px solid var(--linie);
    padding: 0.7rem 0.9rem;
    font-size: 0.9375rem;
}

.notice--warning { background: var(--warnung-grund); border-color: var(--warnung-linie); }
.notice--ok      { background: var(--ok-grund);      border-color: var(--ok-linie); }
.notice--error   { background: var(--fehler-grund);  border-color: var(--fehler-linie); }

.note { color: var(--text-still); font-size: 0.875rem; }

.state__status {
    font-family: var(--schrift-eng);
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--akzent);
}

.loading { color: var(--text-still); }

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

.steps__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1rem;
}

@media (min-width: 44rem) {
    .steps__list { grid-template-columns: repeat(3, 1fr); }
}

.step {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0;
}

.step__title {
    font-family: var(--schrift-eng);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--akzent);
}

.step__text { color: var(--text-still); margin-bottom: 0; }

/* --- Fließtext ------------------------------------------------------- */

.prose { color: var(--text); }
.prose p { max-width: 38rem; }
.prose__lead { font-size: 1.0625rem; color: var(--text-still); }
.prose ul, .prose ol { max-width: 38rem; }

/* --- FAQ ------------------------------------------------------------- */

.faq__item {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    border-bottom: 1px solid var(--linie);
    margin-bottom: 0.5rem;
    padding: 0 1rem;
}

.faq__question {
    font-family: var(--schrift-eng);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.03em;
    /* Das eigene Dreieck weicht dem Plus- und Minuszeichen aus dem Entwurf.
       Beides ohne Skript - <details> kann das von sich aus. */
    list-style: none;
    justify-content: space-between;
    gap: 1rem;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
    content: '+';
    font-size: 1.5rem;
    line-height: 1;
    color: var(--akzent);
    flex: none;
}

.faq__item[open] > .faq__question::after { content: '\2212'; }

.faq__answer { color: var(--text-still); }
.faq__answer p:last-child { margin-bottom: 0.75rem; }

/* --- Kleine Bildschirme ---------------------------------------------- */

@media (max-width: 30rem) {
    .card { border-radius: var(--radius-klein); }
    .badge { font-size: 0.75rem; padding: 0.25rem 0.65rem; }
}