/*
 * Farben aus dem Entwurf "Einladung v2": Petrol statt Braun, dieselben Werte wie in
 * einladung.css, damit Verwaltung und Gaesteseite eine Anwendung bleiben. Der Grund
 * hebt sich sichtbar vom Weiss der Karten ab. Zugesagt, abgesagt und offen behalten
 * ihre eigenen Farben - die tragen eine Bedeutung, keine Stimmung.
 */
:root {
    color-scheme: light dark;
    --grund: #e4eff0;
    --flaeche: #ffffff;
    --rand: #cddcde;
    --text: #17323a;
    --gedaempft: #4d666c;
    --akzent: #0f7380;
    --akzent-text: #ffffff;
    --zugesagt: #2f6b3d;
    --abgesagt: #963232;
    --offen: #8a7320;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #0a1a1e;
        --flaeche: #11262b;
        --rand: #26434a;
        --text: #e6f0f1;
        --gedaempft: #8fa6aa;
        --akzent: #3aafbb;
        --akzent-text: #04232a;
        --zugesagt: #7cc08d;
        --abgesagt: #e28b8b;
        --offen: #d8c06a;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Kopfzeile.
   Schmale Grundstellung: Marke und Abmelden in der ersten Zeile, die Navigation
   darunter ueber die ganze Breite - zwei Zeilen statt drei. Ab 40rem passt alles
   nebeneinander. */
.kopf {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}

.marke {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
}

.kopf nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    order: 1;
    grid-column: 1 / -1;
}

.kopf nav a {
    color: var(--gedaempft);
    text-decoration: none;
    padding: 0.35rem 0;
}

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

.abmelden {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Doppelt genutzt: der Name in der Kopfzeile und die Beschriftung der Kennzahlen
   auf der Feier-Seite. Ausgeblendet wird deshalb nur der in der Kopfzeile. */
.wer {
    color: var(--gedaempft);
    font-size: 0.9rem;
}

/* Auf dem Telefon nimmt der Name die Breite weg, die "Abmelden" braucht -
   wer angemeldet ist, steht unter "Konto". */
.kopf .wer {
    display: none;
}

@media (min-width: 40rem) {
    .kopf {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.75rem 1.25rem;
    }

    .kopf nav {
        order: 0;
        flex: 1;
        gap: 1rem;
    }

    .kopf .wer {
        display: inline;
    }
}

.inhalt {
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 0.35rem;
}

h2 {
    font-size: 1.15rem;
    margin: 2rem 0 0.75rem;
}

.unterzeile {
    color: var(--gedaempft);
    margin: 0 0 1.5rem;
}

/* Meldungen */
.meldung {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--rand);
    margin: 0 0 1.25rem;
}

.hinweis {
    border-left: 4px solid var(--zugesagt);
}

.fehler {
    border-left: 4px solid var(--abgesagt);
}

/* Karten und Tabellen */
.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}

/* Tabellen sind auf dem Telefon keine Tabellen.
   Sechs Spalten passen nicht in 375 Pixel, und waagerecht schieben heisst, dass
   die hinteren Spalten niemand findet - ausgerechnet Ruecklauf, Link und
   Aktionen. Grundstellung ist deshalb die schmale Form: jede Zeile eine Karte,
   der Spaltenname vor dem Wert. Ab 40rem wird daraus wieder eine Tabelle. */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    overflow: hidden;
}

thead {
    display: none;
}

tbody tr {
    display: block;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--rand);
}

tbody tr:last-child {
    border-bottom: none;
}

td {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0;
    text-align: right;
}

/* Besteht der Wert aus mehreren Teilen - Datum und Uhrzeit, Zusagen und
   Personenzahl -, wuerde space-between sie quer ueber die Zeile verteilen. Der
   automatische Rand links schiebt sie stattdessen als Gruppe nach rechts. */
td[data-spalte] > *:first-child {
    margin-left: auto;
}

/* Der Spaltenname steht vor dem Wert - ohne Kopfzeile wuesste sonst niemand,
   wofuer "11.09.2026" steht. */
td[data-spalte]::before {
    content: attr(data-spalte);
    flex: 0 0 auto;
    text-align: left;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gedaempft);
    font-weight: 600;
}

/* Leere Zellen ganz weglassen, statt einen Spaltennamen ohne Wert zu zeigen. */
td[data-spalte]:empty {
    display: none;
}

/* Zellen ohne Spaltennamen tragen Schaltflaechen oder Grafiken - die brauchen
   die ganze Breite und keine Beschriftung. */
td:not([data-spalte]) {
    display: block;
    text-align: left;
    padding-top: 0.5rem;
}

/* Die erste Zelle ist in der schmalen Form die Ueberschrift der Karte - der Name
   des Gastes, das Motto der Feier. Ein Spaltenname davor waere ueberfluessig. */
td.zeilentitel {
    display: block;
    text-align: left;
    font-weight: 600;
    padding-top: 0;
    margin-bottom: 0.35rem;
}

@media (min-width: 40rem) {
    thead {
        display: table-header-group;
    }

    tbody tr,
    tbody tr:last-child {
        display: table-row;
        padding: 0;
        border-bottom: none;
    }

    th,
    td,
    td:not([data-spalte]) {
        display: table-cell;
        text-align: left;
        padding: 0.65rem 0.8rem;
        border-bottom: 1px solid var(--rand);
        vertical-align: top;
    }

    th {
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--gedaempft);
        font-weight: 600;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    td[data-spalte]::before {
        content: none;
    }

    td[data-spalte]:empty {
        display: table-cell;
    }

    td.zeilentitel {
        font-weight: inherit;
    }

    td[data-spalte] > *:first-child {
        margin-left: 0;
    }
}

.tabelle-umbruch {
    overflow-x: auto;
}

/* Zustände */
.marke-status {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    border: 1px solid currentColor;
}

.st-ACCEPTED { color: var(--zugesagt); }
.st-DECLINED { color: var(--abgesagt); }
.st-PENDING  { color: var(--offen); }

.vorbei {
    color: var(--gedaempft);
    font-size: 0.85rem;
}

/* Formulare */
label {
    display: block;
    margin-bottom: 1rem;
}

label > span {
    display: block;
    font-size: 0.88rem;
    color: var(--gedaempft);
    margin-bottom: 0.25rem;
}

input, textarea, select {
    width: 100%;
    padding: 0.55rem 0.65rem;
    font: inherit;
    color: var(--text);
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 6px;
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

.reihe {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.reihe > label {
    flex: 1 1 12rem;
}

.feldfehler {
    color: var(--abgesagt);
    font-size: 0.85rem;
    margin: -0.75rem 0 1rem;
}

/* Ankreuzfelder: Kaestchen und Beschriftung nebeneinander. Ohne das erbt das
   Ankreuzfeld die volle Breite der uebrigen Eingabefelder. */
label.ankreuz {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}

label.ankreuz input {
    /* Gross genug, um es mit dem Daumen zu treffen. */
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

label.ankreuz > span {
    display: inline;
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--text);
}

.feldgruppe {
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 0.8rem 0.9rem 0.3rem;
    margin: 0 0 1rem;
}

.feldgruppe legend {
    font-size: 0.85rem;
    color: var(--gedaempft);
    padding: 0 0.35rem;
}

.ankreuzreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
}

/* Schaltflächen */
button, .knopf {
    font: inherit;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--akzent);
    background: var(--akzent);
    color: var(--akzent-text);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

button:hover, .knopf:hover {
    filter: brightness(1.08);
}

.knopf-schlicht {
    background: transparent;
    color: var(--gedaempft);
    border-color: var(--rand);
}

.knopf-schlicht:hover {
    color: var(--text);
}

.knopf-gefahr {
    background: transparent;
    color: var(--abgesagt);
    border-color: var(--abgesagt);
}

.knopfreihe {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
}

.knopf-klein {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
}

.aktionen {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.aktionen form {
    display: inline;
}

/* Anmeldeseite */
.anmelde-rahmen {
    max-width: 22rem;
    margin: 6rem auto;
    padding: 0 1.25rem;
}

.leer {
    color: var(--gedaempft);
    text-align: center;
    padding: 2.5rem 1rem;
}

.qr-vorschau {
    width: 64px;
    height: 64px;
    display: block;
}

code.link {
    font-size: 0.82rem;
    word-break: break-all;
    color: var(--gedaempft);
    /* Umbrochene Adressen linksbuendig - rechtsbuendig franst jede Zeile aus. */
    text-align: left;
}

/* Anmeldeseite: Passwort als aufklappbare Rueckfallebene unter dem Passkey-Weg */
details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--gedaempft);
}

details[open] summary {
    color: var(--text);
    margin-bottom: 0.25rem;
}

/* Kalender: Monatsansicht */
.monatswahl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}

.monatsname {
    font-size: 1.05rem;
}

.monat {
    min-width: 34rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    overflow: hidden;
}

.wochentage,
.woche {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.wochentage span {
    padding: 0.5rem 0.6rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gedaempft);
    font-weight: 600;
    border-bottom: 1px solid var(--rand);
}

.tag {
    min-height: 5.5rem;
    padding: 0.35rem 0.4rem 0.5rem;
    border-right: 1px solid var(--rand);
    border-bottom: 1px solid var(--rand);
}

.woche:last-child .tag {
    border-bottom: none;
}

.tag:nth-child(7n) {
    border-right: none;
}

.tageszahl {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--gedaempft);
    margin-bottom: 0.2rem;
}

.fremder-monat {
    background: var(--grund);
}

.fremder-monat .tageszahl {
    opacity: 0.55;
}

.heute .tageszahl {
    background: var(--akzent);
    color: var(--akzent-text);
    border-radius: 999px;
    min-width: 1.5rem;
    padding: 0.1rem 0.35rem;
    text-align: center;
    font-weight: 600;
}

.termine {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Die Farbe kommt vom Familienmitglied, das den Termin angelegt hat - so ist auf
   einen Blick zu sehen, zu wem er gehoert. */
.tag .termine li {
    font-size: 0.8rem;
    line-height: 1.3;
    padding: 0.1rem 0.3rem 0.1rem 0.4rem;
    border-left: 3px solid var(--farbe, var(--gedaempft));
    border-radius: 2px;
    background: color-mix(in srgb, var(--farbe, var(--gedaempft)) 12%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag .termine .zeit {
    color: var(--gedaempft);
    margin-right: 0.2rem;
}

/* --- Liste statt Raster ----------------------------------------------------
   Sieben Spalten passen nicht in 375 Pixel, und enger gesetzt ist kein Titel
   mehr lesbar. Auf schmalen Geraeten tritt deshalb die Liste an die Stelle des
   Rasters - dieselben Daten, dieselbe Adresse, nur eine Form, die in eine Hand
   passt. Ab 40rem ist es umgekehrt. */
.agenda {
    display: block;
}

.kalender-umbruch {
    display: none;
    /* Sicherheitsnetz fuer Breiten knapp ueber der Umschaltmarke. */
    overflow-x: auto;
}

.agenda-tag {
    margin-bottom: 1.4rem;
}

.agenda-datum {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gedaempft);
    margin: 0 0 0.45rem;
}

.agenda-datum.ist-heute {
    color: var(--akzent);
}

.agenda .termine {
    gap: 0.4rem;
}

.agenda .termine li {
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--farbe, var(--gedaempft));
    border-radius: 4px;
    background: color-mix(in srgb, var(--farbe, var(--gedaempft)) 10%, transparent);
}

/* Das Gitter aus Uhrzeit und Text liegt auf dem Verweis, nicht auf der Zeile -
   so fuellt die anklickbare Flaeche den ganzen Eintrag. */
.agenda .termine .termin-verweis {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 0 0.75rem;
}

.agenda .termine .zeit {
    grid-row: 1;
    font-size: 0.85rem;
    color: var(--gedaempft);
}

.agenda .termine .titel {
    grid-column: 2;
    font-weight: 500;
}

/* Ort und Name stehen unter dem Titel - sie beantworten "wo" und "von wem",
   nicht "was". */
.agenda .termine .beiwerk {
    grid-column: 2;
    font-size: 0.85rem;
    color: var(--gedaempft);
}

@media (min-width: 40rem) {
    .agenda {
        display: none;
    }

    .kalender-umbruch {
        display: block;
    }
}

/* Auf der Startseite steht kein Raster daneben, das die Liste ersetzen koennte -
   dort bleibt sie in jeder Breite. */
.agenda.agenda-immer {
    display: block;
}

/* Jeder Termin fuehrt zu seinem Formular. Der Verweis fuellt das ganze Feld, damit
   auf dem Telefon nicht das Wort getroffen werden muss, sondern die Flaeche. */
.termin-verweis {
    display: block;
    color: inherit;
    text-decoration: none;
}

.termin-verweis:hover .titel {
    text-decoration: underline;
}



/* Nur fuer den Ersteller sichtbar. Gestrichelt statt durchgezogen - das kostet
   keine Breite, und im Feld ist fuer ein Wort kein Platz. Was es bedeutet, steht
   am Mauszeiger. */
.termine li.nur-ich {
    border-left-style: dashed;
    cursor: help;
}


/* Listen.
   Eine Zeile ist 44 Pixel hoch und das Kaestchen 20 - ein Haken wird mit dem
   Daumen im Supermarkt gesetzt, nicht mit der Maus. Das gilt in jeder Breite,
   deshalb gibt es hier keine Umschaltmarke wie bei den Tabellen. */
.listenkarten {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.listenkarte {
    display: block;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    color: inherit;
    text-decoration: none;
}

.listenkarte:hover .listenname {
    text-decoration: underline;
}

.listenkarte .zeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.listenname {
    flex: 1 1 auto;
    font-weight: 600;
}

.listenkarte .zaehler {
    font-size: 0.82rem;
    color: var(--gedaempft);
}

.listenkarte .beiwerk {
    margin: 0.35rem 0 0 1.75rem;
    color: var(--gedaempft);
    font-size: 0.85rem;
}

/* Das Erfassungsfeld traegt autofocus: nach dem Absenden steht der Cursor wieder
   darin. Fuenf Sachen eintragen heisst damit fuenfmal tippen, ohne die Hand zu
   bewegen - auch ohne JavaScript. */
.erfassen {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.erfassen input[name="text"] {
    flex: 1 1 12rem;
    margin: 0;
}

.erfassen input[name="quantity"] {
    flex: 0 1 7rem;
    margin: 0;
}

.erfassen button {
    flex: 0 0 auto;
}

.eintraege {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 0 1rem;
    margin: 0;
    list-style: none;
}

.eintrag {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--rand);
}

.eintrag:last-child {
    border-bottom: none;
}

/* Das Kaestchen ist eine Schaltflaeche in einem eigenen winzigen Formular - ohne
   JavaScript schickt ein Ankreuzfeld von sich aus nichts ab. Gesendet wird, was
   der Eintrag werden soll, nicht was er war. */
.haken {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rand);
    border-radius: 4px;
    background: var(--grund);
    color: var(--akzent-text);
    cursor: pointer;
}

.haken.gesetzt {
    background: var(--akzent);
    border-color: var(--akzent);
}

.eintrag .text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.eintrag .text:hover .wort {
    text-decoration: underline;
}

.eintrag.ist-erledigt .wort {
    color: var(--gedaempft);
    text-decoration: line-through;
}

.eintrag .menge,
.eintrag .wer-erledigte {
    flex: 0 0 auto;
    color: var(--gedaempft);
    font-size: 0.85rem;
}

.faellig {
    font-size: 0.85rem;
    color: var(--gedaempft);
}

.faellig.heute {
    color: var(--offen);
}

.faellig.ueberfaellig {
    color: var(--abgesagt);
}

/* Erledigtes bleibt stehen, durchgestrichen und gedaempft, und verschwindet erst
   ueber "Aufraeumen" - ein Fehlgriff waere sonst nicht mehr rueckgaengig zu machen. */
.erledigt-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.5rem;
}

.erledigt-kopf .beschriftung {
    flex: 1 1 auto;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gedaempft);
    font-weight: 600;
}

/* Die Farbe der Person, wie im Kalender. Ohne gesetzte Farbe bleibt der Rahmen
   gedaempft, damit die Marke nicht verschwindet. */
.person-marke {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    border: 1px solid currentColor;
    color: var(--gedaempft);
    white-space: nowrap;
}

/* Die Sortierseite: eine eigene Ansicht statt Pfeilen an jeder Zeile der Liste.
   Im Laden wird einhaendig abgehakt - zwei kleine Pfeile neben dem Haken waeren
   dort ein Vergreifen. Hier darf es Pfeile geben, denn hier wird nichts anderes
   getan. */
.sortierbar .platz {
    flex: 0 0 1.25rem;
    color: var(--gedaempft);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.sortierbar .text {
    cursor: default;
}

/* 44 Pixel hoch wie der Haken: was im Gehen getroffen werden muss, ist keinen
   Pixel kleiner als der Daumen. */
.schieben {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--grund);
    color: var(--text);
    cursor: pointer;
}

/* Am Rand bleibt der Knopf stehen und wird blass: verschwaende er, spraengen die
   uebrigen bei jedem Schub um eine Knopfbreite hin und her. */
.schieben:disabled {
    color: var(--rand);
    cursor: default;
}

/* Kacheln der Startseite ----------------------------------------------------
   Zwei Zahlen ueber allem anderen. Bewusst keine .listenkarte: die ist eine
   Zeile und traegt einen Namen, das hier ist eine Zahl und traegt eine Ziffer.
   Nebeneinander schon auf dem Telefon - zwei Kacheln passen in 375 Pixel, und
   untereinander schoeben sie die Termine unter die Falz. */
.kacheln {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.kachel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 0.875rem 0.875rem 1rem;
    color: inherit;
    text-decoration: none;
}

.kachel:hover .kachel-kopf span,
.kachel:focus-visible .kachel-kopf span {
    text-decoration: underline;
}

.kachel-kopf {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gedaempft);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.kachel-zahl {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.kachel-zahl strong {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.1;
}

.kachel-zahl span {
    color: var(--gedaempft);
    font-size: 0.85rem;
}

/* "nichts offen" steht an der Stelle der Ziffer, statt die Kachel verschwinden
   zu lassen. Eine leere Kachel ist eine Auskunft; eine fehlende ist keine, und
   man sucht dann nach dem, was gestern noch da war. */
.kachel-leer {
    color: var(--gedaempft);
    font-size: 0.95rem;
    padding: 0.2rem 0;
}

.kachel-beiwerk {
    color: var(--gedaempft);
    font-size: 0.85rem;
    line-height: 1.35;
}

.kachel-beiwerk.ist-ueberfaellig {
    color: var(--abgesagt);
}

/* Auf dem grossen Schirm bleiben die Kacheln karten-, nicht bildschirmbreit:
   .inhalt ist 62rem breit, haelftig geteilt waere jede Zahl von viel Weiss
   umgeben und die beiden haetten nichts mehr miteinander zu tun. */
@media (min-width: 40rem) {
    .kacheln {
        grid-template-columns: repeat(2, minmax(0, 15rem));
        justify-content: start;
    }
}

/* Kontakte -----------------------------------------------------------------
   Eine Zeile je Mensch, nicht eine Karte: eine Adressliste wird ueberflogen,
   nicht angesehen. Aufbau wie .eintrag bei den Listen, damit beide Seiten
   dieselbe Zeilenhoehe und dieselben Trenner haben. */
.suchzeile {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.suchzeile input[type="search"] {
    flex: 1 1 14rem;
    margin: 0;
}

.kontaktzeile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.45rem 1rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    flex-wrap: wrap;
}

.kontaktzeile .text {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.kontaktzeile .text:hover .wort {
    text-decoration: underline;
}

.unterzeile-klein {
    font-size: 0.82rem;
    color: var(--gedaempft);
    overflow-wrap: anywhere;
}

/* Gedaempft, solange das Datum nur am Kontakt steht; in Akzentfarbe, sobald es
   im Familienkalender erscheint. So sieht man der Liste an, was dort auftaucht. */
.datumsmarke {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: var(--gedaempft);
    white-space: nowrap;
}

.datumsmarke.imkalender {
    color: var(--akzent);
}

/* Eine Zeile je Jahrestag. Auf dem Telefon untereinander - drei Felder
   nebeneinander sind auf 375 Pixel keine Zeile mehr, sondern ein Gedraenge. */
.jahrestagzeile {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.jahrestagzeile > label {
    flex: 1 1 10rem;
    margin: 0;
}

.jahrestagzeile > label.ankreuz {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    font-size: 0.85rem;
    color: var(--gedaempft);
}

.erklaerung {
    margin: 0 0 0.75rem;
}

.erklaerung dt {
    font-weight: 600;
    margin-top: 0.75rem;
}

.erklaerung dd {
    margin: 0.2rem 0 0;
    color: var(--gedaempft);
}

/* Der Haken in der Importvorschau. Gleiche Breite wie das Kaestchen der Listen,
   damit die Zeilen beider Seiten gleich ausgerichtet sind - und ein Platzhalter
   fuer vorhandene Kontakte, sonst ruecken deren Namen nach links aus der Flucht. */
.eintrag .uebernehmen {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.eintrag .haken-platz {
    flex: 0 0 auto;
    width: 20px;
}

/* Als <label> ist der Name Teil des Hakens: ein Griff von 44 Pixeln Hoehe statt
   eines 20 Pixel grossen Kaestchens. */
.eintrag label.text {
    cursor: pointer;
}

/* "ergaenzt: Telefon, Geburtstag" - eine Auskunft, kein Zustand. Deshalb in
   Akzentfarbe statt gedaempft wie "gibt es schon": hier passiert etwas. */
.marke-status.ergaenzbar {
    color: var(--akzent);
    border-color: var(--akzent);
}

/* Feierbilder in der Verwaltung: ein Raster aus Vorschaubildern, unter jedem sein
   Loeschknopf. Quadratisch zugeschnitten, damit Hoch- und Querformat eine ruhige
   Flaeche ergeben - die Ansicht zeigt dann das ganze Bild. */
.bilderraster {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.6rem;
}

.bilderraster li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bilderraster img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    background: var(--rand);
}

.frist-reihe {
    align-items: flex-end;
    margin: 0.8rem 0 0.3rem;
}

.hochlade-stand {
    color: var(--gedaempft);
    font-size: 0.9rem;
}

.hochlade-fehler {
    white-space: pre-line;
    margin: 0.8rem 0 0;
}