/*
 * Öffentliche Seiten, die für sich stehen: Ticketansicht, Zahlseite, Einladung.
 *
 * **Ergänzt `anfrage.css`, ersetzt es nicht.** Dort liegen die Bausteine —
 * Farben, Felder, Knöpfe, Kästen —, hier nur die Hülle darum: Seitengrund,
 * Kopf, Karte und Fuß. Sie zweimal zu schreiben hiesse, sie an zwei Stellen zu
 * ändern und eine davon zu vergessen.
 *
 * **Der Unterschied zum eingebetteten Formular ist die Umgebung.** Das Formular
 * steht als iframe auf einer fremden Seite: durchsichtiger Grund, keine
 * Hülle, hell oder dunkel nach dem, was am Formular hinterlegt ist. Eine Seite,
 * die für sich steht, hat keine umgebende Seite — sie bringt ihren eigenen
 * Grund mit und folgt der Systemeinstellung des Besuchers.
 */

:root {
    --seitengrund: #f4f4f5;
    --karte: #ffffff;
    --karte-rand: #e4e4e7;
    --karte-schatten: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
    --kopf-rand: #e4e4e7;
}

/*
 * Hier ist `prefers-color-scheme` richtig — und nur hier.
 *
 * Beim eingebetteten Formular sagt die Systemeinstellung des Besuchers nichts
 * darüber aus, wie die Seite aussieht, in der es steht; daraus wurden einmal
 * dunkle Felder auf hellem Grund. Diese Seite hat keine umgebende Seite.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --seitengrund: #09090b;
        --karte: #18181b;
        --karte-rand: #27272a;
        --karte-schatten: none;
        --kopf-rand: #27272a;

        /* Die Bausteine aus anfrage.css auf dunkel stellen. Dort tut das die
           Klasse `.dunkel` am body, die hier nicht gesetzt wird: was am
           Formular eine Angabe ist, ist hier eine Frage an das Gerät. */
        --rand: #3f3f46;
        --rand-stark: #71717a;
        --text: #fafafa;
        --gedaempft: #a1a1aa;
        --grund: #18181b;
        --feld: #27272a;
        --knopf: #fafafa;
        --knopf-text: #18181b;
        --fehler: #fca5a5;
        --fehler-flaeche: #450a0a;
        --erfolg: #4ade80;
    }
}

/*
 * Der Erfolgskasten trägt in `anfrage.css` feste Farben und wird dort nur über
 * `body.dunkel` umgestellt — eine Klasse, die diese Seiten nicht setzen, weil
 * sie dem Gerät folgen und keiner Angabe.
 *
 * **Beim Blick auf die bezahlte Rechnung stand er deshalb hellgrün auf
 * schwarzem Grund.** Ein einzelner heller Kasten in einer dunklen Seite sieht
 * aus, als hätte jemand etwas vergessen.
 */
@media (prefers-color-scheme: dark) {
    .erfolgskasten {
        border-color: #166534;
        background: #052e16;
        color: #bbf7d0;
    }
}

/*
 * Die Seite füllt mindestens den Bildschirm, damit der Fuß unten steht und
 * nicht mitten im Weiss klebt, wenn wenig Inhalt da ist.
 */
.seite {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--seitengrund);
}

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

.seitenkopf {
    background: var(--karte);
    border-bottom: 1px solid var(--kopf-rand);
}

.seitenkopf-inhalt,
.seitenfuss-inhalt {
    max-width: 40rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
}

.logo {
    display: block;
    /* Feste Höhe, Breite nach Verhältnis: die hinterlegten Logos sind rund
       1000 Pixel breit und lägen sonst quer über der halben Seite. */
    height: 2rem;
    width: auto;
    max-width: 15rem;
    object-fit: contain;
}

/* Welches Logo erscheint, entscheidet das Stylesheet und kein Skript. */
.logo-dunkel { display: none; }

@media (prefers-color-scheme: dark) {
    .logo-hell   { display: none; }
    .logo-dunkel { display: block; }
}

.wortmarke {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* ----------------------------------------------------------------- Karte */

/*
 * `.huelle` gibt es in `anfrage.css` schon — dort ohne Rand und ohne Schatten,
 * weil die umgebende Seite beides mitbringt. Hier bekommt sie beides und ein
 * bisschen mehr Luft.
 */
/*
 * **Die Karte ist so hoch wie ihr Inhalt, nicht wie der Bildschirm.**
 *
 * Beim ersten Blick auf die gerenderte Seite streckte sie sich über die ganze
 * Höhe, und unter dem letzten Absatz stand ein halber Bildschirm Leere in einem
 * Rahmen. Nach unten geschoben wird stattdessen der Fuß — über `margin-top:
 * auto` an ihm.
 */
.seite .huelle {
    flex: 0 0 auto;
    width: 100%;
    max-width: 40rem;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--karte);
    border: 1px solid var(--karte-rand);
    border-radius: 0.75rem;
    box-shadow: var(--karte-schatten);
}

/*
 * Auf schmalen Geräten verschwindet der Rahmen: eine Karte mit 1 rem Rand
 * links und rechts verschenkt auf einem Telefon ein Achtel der Breite.
 */
@media (max-width: 40rem) {
    .seite .huelle {
        margin: 0;
        padding: 1.25rem;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .seitenkopf-inhalt,
    .seitenfuss-inhalt {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ------------------------------------------------------------------- Fuss */

.seitenfuss {
    /* Schiebt sich nach unten, statt die Karte zu strecken. */
    margin-top: auto;
    flex-shrink: 0;
    color: var(--gedaempft);
    font-size: 0.8rem;
}

.seitenfuss-inhalt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    justify-content: space-between;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

.seitenfuss a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.seitenfuss a:hover {
    color: var(--text);
}

/* --------------------------------------------------- Kopfzeile der Karte */

/*
 * Überschrift und Kennung stehen zusammen und sind vom Inhalt abgesetzt. Im
 * ersten Wurf lief die Nummer als eigener Absatz mit, und die Seite begann mit
 * zwei Zeilen, die dasselbe meinten.
 */
.kartenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rand);
}

.kartenkopf h1 {
    margin: 0;
}

.kartenkopf .kennung {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gedaempft);
    white-space: nowrap;
}

.kartenkopf .kennung strong {
    color: var(--text);
    font-weight: 600;
}

/* ---------------------------------------------------------- Plaketten */

.plakette {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid currentColor;
}

.plakette-offen    { color: var(--gedaempft); }
.plakette-warnung  { color: #b45309; }
.plakette-fehler   { color: var(--fehler); }
.plakette-erfolg   { color: var(--erfolg); }

@media (prefers-color-scheme: dark) {
    .plakette-warnung { color: #fbbf24; }
}

/* ------------------------------------------------------- Betragszeile */

/*
 * Der offene Betrag ist die Zahl, wegen der die Seite aufgerufen wird. Er steht
 * deshalb gross und abgesetzt und nicht als eine Zeile unter fünf anderen.
 */
.betrag {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--rand);
    border-radius: 0.6rem;
    background: var(--seitengrund);
}

.betrag .beschriftung {
    margin: 0;
    color: var(--gedaempft);
    font-size: 0.9rem;
}

.betrag .summe {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Zweitrangiges */

/*
 * Ein Knopf, der nicht die Hauptsache ist — „Als PDF ansehen" neben
 * „Bezahlen". Er sieht aus wie ein Knopf, drängt sich aber nicht auf.
 */
.knopf-zweit {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--rand-stark);
    border-radius: 0.4rem;
    background: transparent;
    color: var(--text);
    font-weight: 550;
    font-size: 0.9rem;
    text-decoration: none;
}

.knopf-zweit:hover {
    background: var(--seitengrund);
}

/* -------------------------------------------------------- Verlaufsbeiträge */

/*
 * Eine Antwort von uns bekommt einen Streifen in der Akzentfarbe.
 *
 * **Der Unterschied liegt in der Farbe und nicht nur im Namen.** Beim Blick auf
 * die fertige Seite sah der Verlauf aus wie eine Liste gleichartiger Kästen —
 * man musste jede Kopfzeile lesen, um zu wissen, von wem der Beitrag ist.
 *
 * Die Farbe steht hier und nicht als Wert am Datensatz: sie meint „von uns" und
 * nicht eine bestimmte Marke. Nach außen tritt die Dachmarke auf.
 */
.beitrag-wir {
    border-left: 3px solid #2563eb;
}

@media (prefers-color-scheme: dark) {
    .beitrag-wir {
        border-left-color: #60a5fa;
    }
}

/* Ein Abschnitt, der vom übrigen Inhalt abgesetzt ist. */
.abschnitt {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rand);
}

.abschnitt h2 {
    margin-top: 0;
}

/*
 * Die Angaben einer eingegangenen Kündigung.
 *
 * Eine Definitionsliste und keine Tabelle: Es sind Paare aus Bezeichnung und
 * Wert, keine Zeilen mit Spalten. Auf schmalen Geräten stehen sie
 * untereinander, weil eine zweispaltige Aufzählung dort ohnehin umbricht.
 */
.angaben {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.9rem;
}

.angaben dt {
    font-weight: 600;
    opacity: 0.75;
}

.angaben dd {
    margin: 0;
}

@media (max-width: 30rem) {
    .angaben {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .angaben dd {
        margin-bottom: 0.5rem;
    }
}