/* ---------------------------------------------------------------------------
   Die Seiten ohne Anmeldung

   Dieselben Farben und dieselbe Schrift wie die uebrige Suite -- aber ohne
   Navigationsbaum und ohne Fusszeile. Wer hier liest, ist Veranstalter und
   kein Mitglied: er soll ein Formular sehen und nicht eine Anwendung.

   Die Breite ist bewusst knapp gehalten. Das Formular steht haeufig in einem
   Rahmen auf einer fremden Seite, die ihrerseits schon einen Rand hat; eine
   zweite breite Flaeche darin wirkt verschachtelt.
--------------------------------------------------------------------------- */

html {
    margin: 0;
    padding: 0;
}

/* Ausdruecklich block und nicht flex: die uebrige Suite macht aus dem Body
   eine Spalte fuer ihr Geruest aus Kopfzeile, Navigation und Inhalt. Hier gibt
   es dieses Geruest nicht, und die Spalte brachte die Seite auf schmalen
   Geraeten dazu, sich waagerecht aufzuschieben. */
.offen-body {
    display: block;
    width: 100%;
    min-width: 0;
    background: var(--color-bg, #f4f4f4);
    margin: 0;
    overflow-x: clip;
}

.offen {
    box-sizing: border-box;
    width: 100%;
    max-width: 52rem;
    min-width: 0;
    margin: 0 auto;
    padding: var(--space-4, 1rem);
}

.offen *,
.offen *::before,
.offen *::after {
    box-sizing: border-box;
}

.offen img,
.offen input,
.offen select,
.offen textarea {
    max-width: 100%;
}

.offen__kopf {
    display: flex;
    align-items: flex-start;      /* zweizeilige Gliederung oben buendig */
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem) 0;
    border-bottom: 1px solid var(--color-border, #ddd);
    margin-bottom: var(--space-4, 1rem);
}

.offen__logo {
    height: 3.5rem;
    width: auto;
    flex: 0 0 auto;
}

.offen__gliederung {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    padding-top: .15rem;
}

.offen__ov {
    font-weight: 700;
    font-size: 1.05rem;
}

.offen__kennung {
    color: var(--color-muted, #666);
}

.offen__fuss {
    margin-top: var(--space-6, 2rem);
    padding-top: var(--space-3, .75rem);
    border-top: 1px solid var(--color-border, #ddd);
    color: var(--color-muted, #666);
    font-size: .9rem;
}

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

.anf-karte {
    background: #fff;
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius, 6px);
    padding: var(--space-5, 1.5rem);
    margin-bottom: var(--space-4, 1rem);
}

.anf-karte--schmal {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
}

.anf-titel {
    margin: 0 0 var(--space-2, .5rem);
    font-size: 1.5rem;
}

.anf-abschnitt {
    margin: var(--space-5, 1.5rem) 0 var(--space-2, .5rem);
    font-size: 1.05rem;
}

.anf-hinweis {
    background: var(--color-bg, #f4f4f4);
    border-left: 3px solid var(--drk-red, #e60005);
    padding: var(--space-3, .75rem);
    margin-bottom: var(--space-4, 1rem);
}

.anf-kopfzeile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
}

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

/* Ein fieldset schrumpft von sich aus nicht unter die Breite seines breitesten
   Inhalts -- es hat ab Werk min-inline-size: min-content. In einem Rahmen auf
   einer fremden Seite, deren Breite wir nicht kennen, schiebt es die Seite
   dadurch waagerecht auf. Dasselbe gilt fuer Eingabefelder: ein <input> ist
   ohne Zutun rund zwanzig Zeichen breit und laesst sich nur so weit
   zusammenschieben. Beides wird hier aufgehoben. */
.offen fieldset,
.offen .fset {
    min-width: 0;
    max-width: 100%;
}

.offen input,
.offen select,
.offen textarea {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Zwei nebeneinander, solange Platz ist. Auf dem Telefon untereinander --
   zwei halbe Felder sind dort schlechter als ein ganzes. */
.anf-paar,
.anf-drei {
    display: grid;
    gap: var(--space-3, .75rem);
}

/* minmax(0, 1fr) und nicht 1fr: eine Spalte mit 1fr darf nicht unter die
   kleinstmoegliche Breite ihres Inhalts schrumpfen, und ein Feld fuer Datum
   und Uhrzeit bringt eine betraechtliche mit -- die drei Zeitfelder schoben
   die Seite deshalb ueber den rechten Rand. */
@media (min-width: 40rem) {
    .anf-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Drei Zeitfelder nebeneinander erst, wenn sie auch nebeneinander lesbar
   sind. Darunter untereinander. */
@media (min-width: 56rem) {
    .anf-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 40rem) and (max-width: 55.99rem) {
    .anf-drei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.anf-bedarf__zeile {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2, .5rem);
    margin-bottom: var(--space-2, .5rem);
}

@media (min-width: 40rem) {
    .anf-bedarf__zeile {
        grid-template-columns: 11rem minmax(0, 1fr) 5rem;
        align-items: start;
    }
}

.anf-datenschutz {
    margin: var(--space-4, 1rem) 0;
    font-size: .9rem;
}

/* -- Quittung ------------------------------------------------------------- */

.anf-quittung {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2, .5rem) var(--space-4, 1rem);
    margin: var(--space-4, 1rem) 0;
}

.anf-quittung dt {
    color: var(--color-muted, #666);
}

.anf-quittung dd {
    margin: 0;
}

/* Der Schluessel wird abgeschrieben. Gross, mit Abstand zwischen den Zeichen
   und in einer Schrift, in der sich die Zeichen unterscheiden. */
.anf-quittung__gross {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .06em;
    word-break: break-all;
}

/* -- Verlauf -------------------------------------------------------------- */

.anf-verlauf {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anf-verlauf__eintrag {
    display: grid;
    gap: var(--space-1, .25rem) var(--space-4, 1rem);
    padding: var(--space-3, .75rem) 0;
    border-bottom: 1px solid var(--color-border, #ddd);
}

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

.anf-verlauf__eintrag:last-child { border-bottom: 0; }

.anf-verlauf__eintrag p { margin: .25rem 0 0; }

.anf-verlauf__zeit { color: var(--color-muted, #666); font-size: .9rem; }

/* Interne Eintraege heben sich ab -- wer schreibt, muss auf einen Blick
   sehen, was der Veranstalter nicht liest. */
.anf-verlauf__eintrag--intern {
    background: var(--color-bg, #f4f4f4);
    border-left: 3px solid var(--color-muted, #666);
    padding-left: var(--space-3, .75rem);
}

/* -- Listen und Postausgang ----------------------------------------------- */

.anf-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anf-liste li {
    padding: var(--space-2, .5rem) 0;
    border-bottom: 1px solid var(--color-border, #ddd);
}

.anf-liste li:last-child { border-bottom: 0; }

.anf-post {
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius, 6px);
    padding: var(--space-3, .75rem);
    margin-bottom: var(--space-3, .75rem);
}

.anf-post__kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3, .75rem);
}

/* Der Text wird kopiert und weitergegeben -- also umbrechen statt scrollen. */
.anf-post__text {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--color-bg, #f4f4f4);
    padding: var(--space-3, .75rem);
    border-radius: var(--radius, 6px);
    margin: var(--space-2, .5rem) 0 0;
    font-size: .9rem;
}

/* Eine Adresse bricht an jeder Stelle, sonst sprengt sie die Spalte. */
.anf-umbruch { word-break: break-all; }

/* Pfad und Erklaerung untereinander. Nebeneinander passt keine feste Spalte:
   die Adressen sind laenger als jede, die noch Platz fuer den Text liesse. */
.anf-pfad {
    margin: 0 0 var(--space-4, 1rem);
    padding-left: var(--space-3, .75rem);
    border-left: 3px solid var(--color-border, #ddd);
}

.anf-pfad p { margin: 0; }

.anf-pfad__weg {
    font-weight: 700;
    overflow-wrap: anywhere;
    margin-bottom: .2rem !important;
}

.anf-stand {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    background: var(--color-bg, #f4f4f4);
    border: 1px solid var(--color-border, #ddd);
}

.anf-stand--neu,
.anf-stand--rueckfrage {
    background: #fff4e5;
    border-color: #e8a33d;
}

.anf-stand--zugesagt {
    background: #e8f5e9;
    border-color: #4c9a51;
}

.anf-stand--abgelehnt,
.anf-stand--zurueckgezogen {
    color: var(--color-muted, #666);
}

.anf-abmelden {
    text-align: right;
    font-size: .9rem;
}