/*
 * Ein Stylesheet, von Hand, ohne Build-Schritt.
 *
 * Alles hier ist selbst ausgeliefert: keine CDN, keine Google Fonts, kein Analytics.
 * Das ist nicht nur Geschmack — es ist die Voraussetzung dafür, dass die
 * Content-Security-Policy mit default-src 'self' auskommt und dass kein Dritter
 * erfährt, wer eine Einladung öffnet (docs/architektur.md, Abschnitt 8).
 */

/* ─── Farben ─────────────────────────────────────────────────────────────────
 *
 * Das Orange der Marke, dazu warme Neutraltöne. Warm ist hier keine Laune: Ein
 * neutralgrauer Grund lässt genau dieses Orange schmutzig wirken, weil das Auge die
 * Umgebung als Bezugspunkt nimmt. Die Grautöne haben deshalb alle einen Rotanteil.
 *
 * Zwei Zustände, nicht drei — und prefers-color-scheme kommt bewusst nicht vor. Eine
 * Vorgabe, die je nach Rechner anders ausfällt, macht aus einem Umschalter wieder eine
 * Ratesache: Der Server wüsste nicht, was der Browser gerade zeigt, und der Knopf
 * könnte nicht benennen, wohin er führt. Also: dunkel, sofern nichts anderes gewählt
 * ist, und der Server schreibt die Wahl als data-theme an <html>.
 *
 * Zwei Orangetöne und nicht einer: --akzent trägt Text und muss deshalb je nach Grund
 * heller oder dunkler ausfallen, --akzent-flaeche füllt Knöpfe und bleibt in beiden
 * Fassungen dasselbe Markenorange. Ein Knopf, der im hellen Thema die Farbe wechselt,
 * wäre nicht mehr derselbe Knopf.
 */
:root {
    --grund: #141110;
    --flaeche: #201a17;
    --flaeche-hoch: #2a221d;
    --linie: #372c25;
    --schrift: #f7f0ea;
    --gedaempft: #af9d90;
    --akzent: #ffb054;
    --akzent-flaeche: #ee9a2c;
    --akzent-schrift: #2a1802;
    --gut: #8ad0a6;
    --unsicher: #ffd08a;
    --warnung: #f0937c;
    --schatten: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}

:root[data-theme="hell"] {
    --grund: #faf7f3;
    --flaeche: #ffffff;
    --flaeche-hoch: #f4efe8;
    --linie: #e6dcd0;
    --schrift: #221a14;
    --gedaempft: #6f6055;
    --akzent: #8a5206;
    --akzent-flaeche: #ee9a2c;
    --akzent-schrift: #2a1802;
    --gut: #1e7a4a;
    --unsicher: #8a6209;
    --warnung: #a5341f;
    --schatten: 0 0.5rem 1.5rem rgba(90, 60, 30, 0.09);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    padding: 0.875rem 1rem 3rem;
    max-width: 44rem;
    background: var(--grund);
    color: var(--schrift);
    font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

/* ─── Kopfzeile ──────────────────────────────────────────────────────────────
 *
 * Drei Zeilen, immer in derselben Reihenfolge: Marke und Themenschalter, dann der
 * Seitentitel, dann die Navigation. Nebeneinander konkurrieren auf einem schmalen
 * Bildschirm drei Dinge um dieselbe Zeile und keines bekommt genug Platz — und
 * ausgerechnet der Seitentitel, der sagt, wo man ist, wäre der erste, der bricht.
 */
.kopfleiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marke {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--akzent);
    text-decoration: none;
}

.marke-zeichen {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
}

.marke-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gedaempft);
}

.marke-name b {
    color: var(--akzent);
}

.thema-knopf {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: 0.75rem;
    background: var(--flaeche);
    color: var(--akzent);
    cursor: pointer;
}

.thema-knopf svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

header {
    padding-bottom: 0.5rem;
}

h1 {
    margin: 1.25rem 0 0;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

/* Die Navigation als Reihe von Pillen. Wo man gerade ist, steht gefüllt da —
   aria-current setzt die Vorlage, die Farbe kommt von hier. Ein Zustand, den nur die
   Farbe trägt, wäre für Screenreader gar nicht vorhanden. */
.kopfzeug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.kopfzeug > a,
.kopfzeug > span,
.kopfzeug button {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--linie);
    border-radius: 0.625rem;
    background: var(--flaeche);
    color: var(--gedaempft);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.kopfzeug > a {
    color: var(--akzent);
}

.kopfzeug > a[aria-current] {
    border-color: var(--akzent-flaeche);
    background: var(--akzent-flaeche);
    color: var(--akzent-schrift);
    font-weight: 650;
}

.kopfzeug button {
    cursor: pointer;
    font-family: inherit;
}

/* Das Formular um den Abmelden-Knopf ist selbst ein Flex-Element und brächte sonst
   die eigene Zeilenhöhe mit — der Knopf säße als einziger tiefer als die Pillen
   daneben. */
.kopfzeug form {
    display: flex;
    margin: 0;
}

/* ─── Überschriften ──────────────────────────────────────────────────────────
 *
 * Abschnittsüberschriften sind Wegweiser, keine Schlagzeilen: klein, gesperrt,
 * gedämpft. Die Rangfolge trägt die Größe des Inhalts darunter — der Blick soll auf
 * dem Termin landen und nicht auf dem Wort „Kommend“.
 */
h2 {
    margin: 2rem 0 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gedaempft);
}

main > h2:first-child {
    margin-top: 1.5rem;
}

h3 {
    margin: 0;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}

/* ─── Der nächste Termin ─────────────────────────────────────────────────────
 *
 * Er bekommt die ganze Fläche, alles danach ist eine ruhige Zeile. Die Rangfolge
 * steckt damit in der Größe und nicht in einem Etikett: Auf einem Telefon sieht man
 * ohne zu scrollen genau das, was als Nächstes ansteht.
 */
.hero {
    border: 1px solid var(--linie);
    border-radius: 1.5rem;
    background: var(--flaeche);
    box-shadow: var(--schatten);
    overflow: hidden;
}

/* Das Bild randlos oben, in fester Höhe. object-fit: cover füllt den Streifen
   vollständig und schneidet Überstehendes ab — das Bild wird also beschnitten und
   nicht verzerrt, gleich welches Seitenverhältnis es mitbringt. */
.hero-bild {
    display: block;
    width: 100%;
    height: 9rem;
    object-fit: cover;
    background: var(--flaeche-hoch);
}

.hero-inhalt {
    padding: 1.25rem;
}

.hero h3 {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.countdown {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--flaeche-hoch);
    color: var(--akzent);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.03em;
}

.wann {
    margin: 0.375rem 0 0;
    color: var(--akzent);
    font-size: 0.9375rem;
    font-weight: 600;
}

.gruss {
    margin: 0.5rem 0 0;
    color: var(--gedaempft);
}

.gruss strong {
    color: var(--schrift);
}

.wann small {
    display: block;
    margin-top: 0.125rem;
    color: var(--gedaempft);
    font-weight: 400;
    font-size: 0.9375rem;
}

/* ─── Die eigene Antwort ─────────────────────────────────────────────────────
 *
 * Die Farbe allein trägt die Aussage nicht: Vor jeder Marke steht ein Zeichen, und
 * das Wort steht ohnehin daneben. Wer Farben nicht unterscheidet, verliert nichts.
 */
.antwort {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--flaeche-hoch);
    color: var(--gut);
    font-size: 0.875rem;
    font-weight: 600;
}

.antwort::before {
    content: "✓";
    font-weight: 800;
}

.antwort.offen {
    color: var(--unsicher);
}

.antwort.offen::before {
    content: "?";
}

.antwort.ab {
    color: var(--warnung);
}

.antwort.ab::before {
    content: "×";
}

.kommentar {
    margin: 0.875rem 0 0;
    padding-left: 0.875rem;
    border-left: 2px solid var(--akzent-flaeche);
    color: var(--gedaempft);
    font-style: italic;
}

/* ─── Zahlen ─────────────────────────────────────────────────────────────────
 *
 * Vier Kacheln, immer dieselben vier, in jeder Ansicht und für Gast wie Gastgeber.
 * „Zugesagt“ zählt Personen samt Begleitung und liegt vorn und doppelt so breit: Sie
 * ist die Zahl, nach der wirklich geplant wird. Zahlen, die sich je nach Seite
 * unterscheiden, wären schlimmer als keine — deshalb kommen sie überall aus derselben
 * Abfrage und demselben Fragment.
 */
.zahlen {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
}

.kachel {
    grid-column: span 3;
    padding: 0.75rem 0.625rem;
    border: 1px solid var(--linie);
    border-radius: 0.875rem;
    background: var(--flaeche-hoch);
}

.kachel b {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.kachel span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--gedaempft);
}

/* Erste Reihe: Zugesagt nimmt zwei Drittel, Eingeladen den Rest. Zweite Reihe:
   Unsicher und Abgesagt je zur Hälfte. */
.kachel.gross {
    grid-column: span 4;
    border-color: transparent;
    background: var(--akzent-flaeche);
    color: var(--akzent-schrift);
}

.kachel.gross + .kachel {
    grid-column: span 2;
}

.kachel.gross b {
    font-size: 2rem;
}

.kachel.gross span {
    color: var(--akzent-schrift);
    font-weight: 600;
    opacity: 0.72;
}

.kachel.un b {
    color: var(--unsicher);
}

.kachel.ne b {
    color: var(--warnung);
}

/* ─── Zeilen ─────────────────────────────────────────────────────────────────
 *
 * Alles außer dem nächsten Termin: derselbe Aufbau wie oben, nur klein. Das Quadrat
 * links steht immer, mit Bild oder ohne — ohne den Platzhalter rutschte die
 * Textspalte in bildlosen Zeilen nach links, und die Liste wäre unruhig.
 */
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    margin-bottom: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--linie);
    border-radius: 1rem;
    background: var(--flaeche);
}

.terminzeile {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.terminzeile > div {
    min-width: 0;
    flex: 1;
}

.miniatur,
.miniatur-leer {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.75rem;
}

.miniatur {
    object-fit: cover;
}

.miniatur-leer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--flaeche-hoch);
    color: var(--gedaempft);
    font-size: 1.25rem;
    font-weight: 600;
}

.name {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--schrift);
    letter-spacing: -0.01em;
}

/* Der Name führt auf die Gästeliste, sieht aber nicht aus wie ein Link im Fließtext:
   Eine Liste aus lauter unterstrichenen Überschriften liest sich als Textwüste. */
a.name {
    color: var(--schrift);
    text-decoration: none;
}

.beiwerk {
    display: block;
    margin-top: 0.2rem;
    color: var(--gedaempft);
    font-size: 0.8125rem;
}

.beiwerk strong {
    color: var(--warnung);
}

.vergangen {
    opacity: 0.62;
}

/* ─── Kalenderexport ─────────────────────────────────────────────────────────
 *
 * Ein Popover. Das Attribut allein bringt alles mit, wofür sonst ein Skript nötig
 * wäre: Schließen beim Klick nach außen, Schließen mit Esc, Fokusführung und die
 * Darstellung in der obersten Ebene — dort kann kein überlaufversteckender Vorfahr
 * es beschneiden.
 *
 * Zentriert und nicht am Knopf verankert: Ein Anker ohne Skript verlangt CSS Anchor
 * Positioning, und das kann noch längst nicht jeder Browser. Auf einem Telefon ist die
 * Karte in der Mitte ohnehin die bessere Wahl — sie ist groß genug zum Treffen und
 * steht nicht halb außerhalb des Bildes.
 */
.kalender {
    display: inline-block;
    margin-top: 0.75rem;
}

.kalender-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--linie);
    border-radius: 0.75rem;
    background: transparent;
    color: var(--akzent);
    font-size: 0.875rem;
    font-weight: 600;
}

.kalender-knopf svg {
    width: 1rem;
    height: 1rem;
}

/* Lage und Zentrierung kommen aus der Vorgabe des Browsers (inset: 0, margin: auto);
   hier steht nur, wie die Karte aussieht. */
.kalender-fenster {
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--linie);
    border-radius: 1.25rem;
    background: var(--flaeche);
    color: var(--schrift);
    box-shadow: var(--schatten);
}

.kalender-fenster:popover-open {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kalender-fenster::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.kalender-titel {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gedaempft);
}

.kalender-fenster a {
    padding: 0.625rem;
    border-radius: 0.625rem;
    color: var(--schrift);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.kalender-fenster a:hover,
.kalender-fenster a:focus-visible {
    background: var(--flaeche-hoch);
}

.kalender-fenster small {
    display: block;
    margin-top: 0.15rem;
    color: var(--gedaempft);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
}

/*
 * Ohne Popover-Unterstützung bleibt das Attribut wirkungslos und der Kasten stünde
 * dauerhaft offen — der Knopf daneben täte nichts. Dann lieber gleich beides
 * absichtlich: Der Knopf verschwindet, die zwei Links stehen als schlichte Liste da.
 * Die Ausfuhr funktioniert, sie ist nur nicht eingeklappt.
 */
@supports not selector(:popover-open) {
    .kalender-knopf {
        display: none;
    }

    .kalender-fenster {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: auto;
        box-shadow: none;
    }
}

/* ─── Dialog ─────────────────────────────────────────────────────────────────
 *
 * Eine Nachfrage vor etwas Endgültigem, als Popover — derselbe Mechanismus wie beim
 * Kalender, dasselbe Aussehen. Der Unterschied ist die Knopfzeile: Abbrechen links und
 * leise, die Tat rechts und in der Warnfarbe.
 */
.dialog {
    width: min(22rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid var(--linie);
    border-radius: 1.25rem;
    background: var(--flaeche);
    color: var(--schrift);
    box-shadow: var(--schatten);
}

.dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.dialog p {
    margin: 0 0 1rem;
}

.dialog-titel {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--schrift);
}

.dialog-knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dialog-knoepfe form {
    margin: 0;
}

.dialog-knoepfe button:not(.gefahr) {
    background: transparent;
    border-color: var(--linie);
    color: var(--schrift);
}

@supports not selector(:popover-open) {
    .dialog {
        display: block;
        margin-top: 1rem;
        width: auto;
        box-shadow: none;
    }
}

/* ─── Knöpfe ─────────────────────────────────────────────────────────────────
 *
 * Der ausgefüllte Knopf ist die Hauptsache einer Seite und kommt genau einmal vor.
 * Dunkle Schrift auf Orange und nicht weiße: Weiß käme auf diesem Ton nur auf 3,6:1
 * und wäre für alles unterhalb von Überschriftgröße zu wenig.
 */
button,
.knopf {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: var(--akzent-flaeche);
    color: var(--akzent-schrift);
    font: inherit;
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* In einer Zeile ist der Knopf nicht die Hauptsache, sondern einer von vielen. */
li .knopf {
    margin-top: 0.75rem;
    padding: 0.45rem 0.85rem;
    border-color: var(--linie);
    background: transparent;
    color: var(--akzent);
    font-size: 0.875rem;
}

/*
 * Der Hauptknopf einer Seite über die volle Breite.
 *
 * `main >` ist hier nicht Zierde, sondern die eigentliche Regel: Ohne diese Einengung
 * traf der Selektor jedes <button type="submit"> in einem <form> — und damit auch den
 * Themenschalter und den Abmelden-Knopf in der Kopfzeile, die beide Formulare sind.
 * Beide bekamen dadurch `display: block`, volle Breite und 13,6 px Innenabstand oben,
 * was den Halbmond aus der Mitte seines Knopfes nach unten schob.
 *
 * Die Einengung sagt zugleich das Richtige aus: Der große Knopf ist die Hauptsache
 * *dieser Seite*. Was in einer Zeile, einem Kasten oder der Kopfzeile steht, ist eine
 * Nebenhandlung und behält seine natürliche Größe.
 */
.hero .knopf,
main > form > button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.85rem 1.125rem;
}

button.gefahr {
    background: transparent;
    border-color: var(--warnung);
    color: var(--warnung);
}

/* ─── Terminseite ────────────────────────────────────────────────────────────*/

.foto {
    display: block;
    width: 100%;
    max-height: 20rem;
    object-fit: cover;
    border-radius: 1.25rem;
    margin-bottom: 1.25rem;
}

.beschreibung {
    margin: 1rem 0 0;
    white-space: pre-line;
}

.absagefeld {
    margin: 1.25rem 0 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--warnung);
    border-radius: 1rem;
    background: var(--flaeche);
    color: var(--warnung);
    font-weight: 600;
}

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

.leer {
    margin: 0;
    padding: 1.25rem;
    border: 1px dashed var(--linie);
    border-radius: 1rem;
    color: var(--gedaempft);
}

.hinweis {
    margin: 0.5rem 0 0;
    color: var(--gedaempft);
    font-size: 0.875rem;
}

.fehler {
    margin: 0.5rem 0 0;
    color: var(--warnung);
    font-size: 0.875rem;
}

.titelzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0 0.875rem;
}

/* Der Abstand sitzt an der Zeile und nicht an der Überschrift darin — sonst hinge
   der Knopf daneben um zwei Zeilenhöhen versetzt. */
.titelzeile h2 {
    margin: 0;
}

/* Eine Reihe von Knöpfen, die auf schmalen Geräten umbricht statt hinauszuragen. */
.leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.entfernen {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linie);
}

/* ─── Formulare ──────────────────────────────────────────────────────────────*/

form {
    margin: 1.25rem 0 0;
}

label {
    display: block;
    margin: 1.25rem 0 0.4rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--linie);
    border-radius: 0.75rem;
    background: var(--flaeche);
    color: var(--schrift);
    font: inherit;
}

textarea {
    resize: vertical;
}

/* Ohne diese Zeilen zeichnet der Browser seinen eigenen hellen Knopf ins Feld —
   auf dunklem Grund der einzige Fleck, der nicht zur Anwendung gehört. */
input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--linie);
    border-radius: 0.5rem;
    background: var(--flaeche-hoch);
    color: var(--schrift);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

/* Sichtbar und in Markenfarbe: Ohne diese Zeile zeichnet der Browser den Fokusrahmen
   selbst, und auf dunklem Grund ist er dort kaum zu erkennen. */
:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

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

legend {
    padding: 0 0.4rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Die ganze Zeile ist das Ziel und nicht nur der kleine Kreis: Auf einem Telefon
   trifft man einen Punkt von einem Millimeter nicht zuverlässig. */
.wahl {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 0.4rem;
    font-weight: 500;
    cursor: pointer;
}

.wahl input {
    accent-color: var(--akzent-flaeche);
    width: 1.1rem;
    height: 1.1rem;
}

/* Wer absagt, bringt niemanden mit — also fragt das Formular auch nicht danach.
   :has() liest die Auswahl im selben Formular; ein Skript braucht es dafür nicht.
   Der Server setzt den Wert ohnehin auf 0, dies hier nimmt nur die Frage vom Bild. */
form:has(input[name="status"][value="DECLINED"]:checked) .begleitung {
    display: none;
}

/* Nur für einzelne Namen im Fließtext — eine Rolle, ein Schlüssel. */
code {
    padding: 0.1rem 0.3rem;
    border-radius: 0.375rem;
    background: var(--flaeche-hoch);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

.link {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.vorschau {
    display: block;
    width: 100%;
    max-width: 16rem;
    margin-top: 0.75rem;
    border: 1px solid var(--linie);
    border-radius: 0.875rem;
}

.block {
    display: block;
}

/* ─── Rechtstexte ────────────────────────────────────────────────────────────
 *
 * Lange Texte zum Lesen, nicht zum Überfliegen: engere Zeilenbreite, mehr Luft
 * zwischen den Absätzen, Zwischenüberschriften in normaler Größe statt der gesperrten
 * Kapitälchen, die auf Listen gut und über fünf Absätzen mühsam sind.
 */
.recht {
    max-width: 40rem;
}

.recht p,
.recht ul {
    margin: 0 0 1rem;
    line-height: 1.65;
}

.recht ul {
    padding-left: 1.25rem;
    list-style: disc;
}

.recht li {
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.recht h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
}

/* Die Zusammenfassung oben: ein Kasten in der Markenfarbe, aber leise. Er soll ins
   Auge fallen, nicht rufen — deshalb Orange nur als Hauch und als Kante, nicht als
   Fläche mit dunkler Schrift darauf. */
.zusammenfassung {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem 1.25rem 0.75rem;
    border: 1px solid var(--akzent-flaeche);
    border-left-width: 4px;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--akzent-flaeche) 9%, var(--flaeche));
}

.zusammenfassung h2 {
    margin: 0 0 0.75rem;
    color: var(--akzent);
}

.zusammenfassung ul {
    padding-left: 1.1rem;
}

.zusammenfassung li {
    margin-bottom: 0.6rem;
}

/* ─── Die Wege von der Terminübersicht ───────────────────────────────────────
 *
 * Jeder Weg eine Karte: Titel, eine Zeile Zustand, ein Pfeil. Auf dem Telefon
 * untereinander, ab Tabletbreite zu zweit — mehr nebeneinander, und die Zustandszeile
 * bräche in Wortfetzen.
 */
.aktionen {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 40rem) {
    .aktionen {
        grid-template-columns: 1fr 1fr;
    }
}

.aktion {
    position: relative;
    display: block;
    padding: 1rem 2.5rem 1rem 1.125rem;
    border: 1px solid var(--linie);
    border-radius: 1rem;
    background: var(--flaeche);
    color: var(--schrift);
    text-decoration: none;
}

.aktion:hover,
.aktion:focus-visible {
    border-color: var(--akzent-flaeche);
}

.aktion b {
    display: block;
    font-size: 1.0625rem;
    color: var(--akzent);
}

.aktion > span {
    display: block;
    margin-top: 0.25rem;
    color: var(--gedaempft);
    font-size: 0.875rem;
    line-height: 1.45;
}

.aktion::after {
    content: "→";
    position: absolute;
    right: 1.125rem;
    top: 1rem;
    color: var(--akzent);
    font-weight: 600;
}

/* Die beiden Wege, die nichts zurücklassen, stehen anders da. */
.aktion.gefahr b,
.aktion.gefahr::after {
    color: var(--warnung);
}

.aktion.gefahr:hover,
.aktion.gefahr:focus-visible {
    border-color: var(--warnung);
}

.aktion .warnung {
    display: block;
    margin-top: 0.25rem;
    color: var(--warnung);
}

/* Der Einladungstext auf der Übersicht, eingeklappt. */
.einladungstext {
    margin-top: 1.25rem;
}

.einladungstext > summary {
    cursor: pointer;
    color: var(--akzent);
    font-weight: 600;
}

.einladungstext .beschreibung {
    margin-top: 0.75rem;
}

/* ─── Filter der Gästeliste ──────────────────────────────────────────────────
 *
 * Feld und Knopf stehen nebeneinander, solange sie nebeneinander passen, und brechen
 * sonst um. Auf einem Telefon liegt der Knopf dadurch unter dem Ausklappfeld und über
 * der Liste — genau dort, wo der Daumen nach der Wahl ohnehin steht.
 *
 * Der Filter bekommt eine eigene Fläche, und zwar die hohe: Die Gästekarten darunter
 * stehen auf --flaeche, das Bedienfeld eine Stufe darüber. Der Unterschied ist die
 * Aussage — hier wird etwas eingestellt, darunter steht das Ergebnis. Nebenbei sitzt
 * das Ausklappfeld dadurch als vertiefte Mulde in seinem Kasten statt bündig auf
 * gleichem Ton zu verschwinden.
 */
.filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--linie);
    border-radius: 1rem;
    background: var(--flaeche-hoch);
}

/* Das Feld nimmt den Platz, der übrig bleibt, hört aber bei 12rem auf zu schrumpfen:
   „Noch keine Antwort (12)" soll in einer Zeile lesbar bleiben. */
.filter > div {
    flex: 1 1 12rem;
}

.filter label {
    margin-top: 0;
}

/*
 * Der Filterknopf bleibt klein.
 *
 * Zwei Klassen im Selektor sind hier Absicht: Sie schlagen die Regel aus dem Abschnitt
 * „Knöpfe", die jeden Absendeknopf direkt unter <main> über die volle Breite zieht.
 * Das ist dort richtig — der Hauptknopf einer Seite ist ihre Hauptsache. Hier ist er
 * es nicht: Die Hauptsache dieser Seite ist die Liste darunter, das Filtern nur der
 * Weg dorthin.
 */
form.filter button[type="submit"] {
    display: inline-block;
    width: auto;
    margin-top: 0;
    border-color: var(--linie);
    background: transparent;
    color: var(--akzent);
}

/* ─── Gästeliste mit Empfängerwahl ───────────────────────────────────────────
 *
 * Das Häkchen und der Name sind ein gemeinsames Ziel: Auf einem Telefon trifft man
 * ein Kästchen von vier Millimetern nicht zuverlässig, einen Namen schon.
 */
.gastwahl {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    font-weight: 600;
    cursor: pointer;
}

.gastwahl input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--akzent-flaeche);
}

/* Die Angaben rücken unter das Häkchen ein, damit die Zeile als eine Einheit gelesen
   wird und nicht als Kästchen mit Text daneben. */
.gastdetails {
    margin-left: 1.7rem;
}


/* ─── Gästepflege ────────────────────────────────────────────────────────────
 *
 * Die Liste aller Gäste ist ein Verzeichnis und keine Sammlung von Formularen. Sie war
 * eines: drei Eingabefelder, vier Knöpfe, ein Erklärabsatz und das Linkfeld — pro
 * Person. Auf einem Telefon ging ein einziger Gast über den ganzen Bildschirm, und wer
 * jemanden suchte, scrollte an Eingabemasken vorbei statt an Namen.
 *
 * Jetzt steht oben, was man zum Wiedererkennen braucht, und daneben der eine Knopf,
 * den man von hier aus wirklich braucht — den Link. Berichtigen, Link erneuern und
 * Löschen sind seltene Handlungen und liegen hinter „Bearbeiten“.
 */
.gastzeile {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

/* min-width: 0, damit eine lange Adresse die Spalte nicht aufbläht und den Knopf aus
   der Zeile schiebt — Flex-Elemente schrumpfen von Haus aus nicht unter ihren Inhalt. */
.gastzeile > div {
    min-width: 0;
    flex: 1;
}

/*
 * Der Kopierknopf: quadratisch, ohne Beschriftung, in der Größe des Themenschalters.
 * Der Name der Handlung steht im aria-label, nicht im Bild — ein Symbol allein ist
 * für Screenreader kein Knopf, sondern ein Rätsel.
 *
 * Das Raster hält beide Symbole in derselben Zelle. Der Knopf ändert dadurch beim
 * Umschlagen auf den Haken seine Größe nicht, und die Zeile springt nicht.
 */
.kopieren {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: 0.75rem;
    background: transparent;
    color: var(--akzent);
}

.kopieren svg {
    grid-area: 1 / 1;
    width: 1.0625rem;
    height: 1.0625rem;
}

.kopieren .kopiert-symbol,
.kopieren[data-kopiert] .kopieren-symbol {
    display: none;
}

/* Der Haken in Grün und nicht in Orange: Er meldet einen Erfolg und ist nicht die
   Ruhestellung des Knopfes. */
.kopieren[data-kopiert] {
    border-color: var(--gut);
    color: var(--gut);
}

.kopieren[data-kopiert] .kopiert-symbol {
    display: block;
}

.gastpflege {
    margin-top: 0.625rem;
}

.gastpflege > summary {
    cursor: pointer;
    color: var(--akzent);
    font-size: 0.875rem;
    font-weight: 600;
}

/*
 * Die Felder legen sich nebeneinander, solange zwei von 9rem hineinpassen, und stapeln
 * sich sonst. Auf einem Telefon ergibt das zwei Zeilen — Vorname neben Nachname, Anrede
 * neben „Übernehmen“ — statt vier übereinander. Die Beschriftungen verlieren dabei ihren
 * Vorgabeabstand von 1,25rem; er ist für ein Formular über die ganze Seite gedacht und
 * hier das Dreifache dessen, was die Zeilen brauchen.
 */
.gastform {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
    margin-top: 0.75rem;
}

.gastform label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gedaempft);
}

/* Derselbe kleine Knopf wie sonst in einer Zeile — nur ohne den oberen Abstand aus
   `li .knopf`, denn das Raster setzt die Abstände hier selbst. */
.gastform button {
    padding: 0.45rem 0.85rem;
    border-color: var(--linie);
    background: transparent;
    color: var(--akzent);
    font-size: 0.875rem;
}

/* Die seltenen Handlungen bleiben klein und gedämpft: Sie stehen zwar aufgeklappt da,
   sind aber nicht der Grund, warum jemand die Liste geöffnet hat. */
.gastpflege .leiste {
    margin-top: 0.875rem;
}

.gastpflege .leiste button {
    padding: 0.45rem 0.85rem;
    border-color: var(--linie);
    background: transparent;
    color: var(--akzent);
    font-size: 0.875rem;
}

.gastpflege .leiste button.gefahr {
    border-color: var(--warnung);
    color: var(--warnung);
}

/* ─── Kurzmeldung ────────────────────────────────────────────────────────────
 *
 * Nach dem Speichern ist die Seite über POST/Redirect/GET neu aufgebaut; ohne diese
 * Zeile wüsste niemand, ob etwas passiert ist. Sie blendet nach sechs Sekunden aus —
 * per CSS, denn diese Anwendung kommt ohne eine Zeile JavaScript aus.
 */
.meldung {
    margin: 1.25rem 0 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--akzent-flaeche);
    border-radius: 1rem;
    background: var(--flaeche);
    color: var(--akzent);
    font-weight: 600;
    animation: ausblenden 6s forwards;
}

@keyframes ausblenden {
    0%, 80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Wer Bewegung im System abbestellt hat, bekommt die Meldung stehend. Sie ist eine
   Auskunft und kein Effekt — sie darf nicht verschwinden, nur weil sie animiert war. */
@media (prefers-reduced-motion: reduce) {
    .meldung {
        animation: none;
    }
}

/* ─── Fußzeile ───────────────────────────────────────────────────────────────
 *
 * Auskunft und Löschung stehen auf jeder Seite und nicht nur auf einer: Ein Recht,
 * das man suchen muss, ist die Hälfte wert.
 */
.fusszeile {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linie);
    font-size: 0.875rem;
}

.fusszeile a {
    color: var(--gedaempft);
}