/* Alle Seiten ohne Anmeldung (templates/oeffentlich/_rahmen.html): Anmeldung,
   Passwort setzen, Einladung, Lastschriftmandat, Formulare, Rückmeldung zu
   einer Veranstaltung, Datenauskunft. Ohne das Bundle der Anwendung: diese
   Datei ist alles, was eine solche Seite an Gestaltung lädt. Die beiden
   Farben setzt der Rahmen aus den Einstellungen der Organisation.

   Aufbau: schmale Spalte, oben klein die Organisation, darunter ein Blatt
   mit farbiger Kante links. Felder stehen untereinander, auf einem Handy wie
   auf dem Schreibtisch, weil viele dieser Seiten über einen Link aus einer
   Mail oder über einen QR-Code geöffnet werden.

   Bausteine: .fo-seite, .fo-kopf, .fo-karte, .fo-meldung, .fo-formular,
   .fo-teil, .fo-feld, .fo-reihe, .fo-haken, .fo-marke, .fo-knopf,
   .fo-knopfzeile, .fo-wahl, .fo-kasten, .fo-angaben, .fo-fenster, .fo-fuss. Eine Seite schreibt keine eigenen Farben, Abstände oder Knöpfe. */

:root {
    --fo-farbe: #2e7d32;
    --fo-farbe-dunkel: #1b5e20;
    --fo-text: #1f2a30;
    --fo-leise: #5d6f78;
    --fo-linie: #cfd8dc;
    --fo-grund: #eef2f1;
    --fo-fehler: #b3261e;
    --fo-warnung: #8a5300;
    --fo-radius: 10px;
    --fo-radius-klein: 8px;
    --fo-dauer: 0.16s;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--fo-text);
    background:
        radial-gradient(60rem 30rem at 100% -10%, color-mix(in srgb, var(--fo-farbe) 14%, transparent), transparent),
        var(--fo-grund);
    min-height: 100vh;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Seite */

.fo-seite {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

/* Anmeldung, Code, Passwort: wenige Felder, schmaleres Blatt. */
.fo-seite--schmal { max-width: 28rem; }

.fo-kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.fo-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.fo-organisation {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fo-leise);
}

.fo-karte {
    background: #fff;
    border-radius: var(--fo-radius);
    border-left: 6px solid var(--fo-farbe);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(31, 42, 48, 0.1);
    padding: 2rem 1.75rem 1.75rem;
}

.fo-karte + .fo-karte { margin-top: 1.25rem; }

.fo-karte h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 5vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.fo-seite--schmal .fo-karte h1 { font-size: clamp(1.4rem, 5vw, 1.75rem); }

/* Folgt gleich das Formular, braucht die Überschrift Luft nach unten. */
.fo-karte h1 + .fo-formular,
.fo-karte h1 + .fo-angaben,
.fo-karte h1 + .fo-kasten { margin-top: 1.25rem; }

.fo-karte h2 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.15rem;
    color: var(--fo-farbe-dunkel);
}

.fo-karte p { margin: 0 0 1rem; }

.fo-einleitung {
    margin: 0 0 1.5rem;
    color: var(--fo-leise);
    white-space: pre-line;
}

.fo-hinweis p {
    margin: 0;
    color: var(--fo-leise);
    white-space: pre-line;
}

.fo-karte a { color: var(--fo-farbe-dunkel); }

/* Teil eines längeren Formulars: Linie darüber, eigene Überschrift (h2). */
.fo-teil {
    margin-top: 1.75rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--fo-linie);
}

/* -------------------------------------------------------------- Meldung */

.fo-meldung {
    margin: 0 0 1.25rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--fo-radius-klein);
    background: #fdecea;
    color: var(--fo-fehler);
    font-weight: 600;
}

.fo-meldung--info {
    background: color-mix(in srgb, var(--fo-farbe) 9%, #fff);
    color: var(--fo-farbe-dunkel);
}

.fo-meldung--erfolg {
    background: color-mix(in srgb, var(--fo-farbe) 14%, #fff);
    color: var(--fo-farbe-dunkel);
}

.fo-meldung--warnung {
    background: #fff4e0;
    color: var(--fo-warnung);
}

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

.fo-formular {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fo-feld { margin-bottom: 1rem; }

/* Mit Fehlerzeile hält die Zeile selbst den Abstand. */
.fo-feld:has(> .fo-fehler) { margin-bottom: 0; }

.fo-feld > label,
.fo-feld > .fo-haken {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.fo-pflicht { color: var(--fo-fehler); }

.fo-feld input:not([type="checkbox"]):not([type="radio"]),
.fo-feld textarea,
.fo-feld select {
    width: 100%;
    padding: 0.7rem 0.8rem;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1.5px solid var(--fo-linie);
    border-radius: var(--fo-radius-klein);
    transition: border-color var(--fo-dauer), box-shadow var(--fo-dauer);
}

.fo-feld textarea { resize: vertical; }

.fo-feld input:hover,
.fo-feld textarea:hover,
.fo-feld select:hover { border-color: var(--fo-leise); }

.fo-feld input:focus-visible,
.fo-feld textarea:focus-visible,
.fo-feld select:focus-visible {
    outline: none;
    border-color: var(--fo-farbe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fo-farbe) 22%, transparent);
}

.fo-feld input[readonly],
.fo-feld input:disabled {
    background: var(--fo-grund);
    color: var(--fo-leise);
}

/* Anmeldecode: große Ziffern, mittig. */
.fo-feld--code input:not([type="checkbox"]):not([type="radio"]) {
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 0.3em;
}

/* Zwei Felder nebeneinander (Vorname und Nachname, PLZ und Ort). */
.fo-reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.fo-reihe--plz { grid-template-columns: 8rem 1fr; }

/* Rückmeldung der IBAN-Prüfung (static/js/global-inputs-iban.js). */
.fo-feld input.iban-input-ok { border-color: var(--fo-farbe); }
.fo-feld input.iban-input-fehler { border-color: var(--fo-fehler); }
.iban-feedback {
    min-height: 1.3rem;
    margin-top: 0.2rem;
    font-size: 0.875rem;
    line-height: 1.3rem;
}
.iban-feedback-ok { color: var(--fo-farbe-dunkel); }
.iban-feedback-fehler { color: var(--fo-fehler); }

/* Beschriftung links, kleines Zahlenfeld rechts (Stückzahl je Auswahl). */
.fo-feld--menge {
    display: grid;
    grid-template-columns: 1fr 7rem;
    gap: 0 1rem;
    align-items: center;
}

.fo-feld--menge > label {
    margin-bottom: 0;
    font-weight: 400;
}

.fo-feld--menge > .fo-fehler { grid-column: 1 / -1; }

/* Kleine Marke neben einem Text: Aufpreis einer Auswahl. */
.fo-marke {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--fo-farbe-dunkel);
    background: color-mix(in srgb, var(--fo-farbe) 12%, #fff);
    border-radius: 4px;
}

/* Erläuterung unter einem Feld. */
.fo-hilfe {
    margin: 0.3rem 0 0;
    font-size: 0.875rem;
    color: var(--fo-leise);
}

.fo-haken {
    display: flex !important;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400 !important;
    cursor: pointer;
}

.fo-haken input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--fo-farbe);
}

.fo-feld.hat-fehler input:not([type="checkbox"]):not([type="radio"]),
.fo-feld.hat-fehler textarea,
.fo-feld.hat-fehler select { border-color: var(--fo-fehler); }

/* Die Fehlerzeile hält ihren Platz auch leer frei. Erschiene sie erst beim
   Verlassen eines Feldes, rutschte der Knopf darunter weg, während jemand
   ihn gerade anklickt, und der Klick ginge daneben. */
.fo-fehler,
.fo-fehler[hidden] {
    display: block !important;
    min-height: 1.3rem;
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    line-height: 1.3rem;
    color: var(--fo-fehler);
}

.fo-fehler[hidden] { visibility: hidden; }

/* --------------------------------------------------------------- Knöpfe */

.fo-knopf {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.8rem 1.75rem;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--fo-farbe);
    border: 1.5px solid var(--fo-farbe);
    border-radius: var(--fo-radius-klein);
    cursor: pointer;
    transition: background-color var(--fo-dauer), border-color var(--fo-dauer), transform var(--fo-dauer);
}

.fo-karte a.fo-knopf { color: #fff; }

.fo-knopf:hover {
    background: var(--fo-farbe-dunkel);
    border-color: var(--fo-farbe-dunkel);
}

.fo-knopf:active { transform: translateY(1px); }

.fo-knopf:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fo-farbe) 40%, transparent);
    outline-offset: 2px;
}

.fo-knopf:disabled {
    opacity: 0.55;
    cursor: default;
}

.fo-knopf--breit {
    align-self: stretch;
    width: 100%;
}

.fo-knopf--zweit,
.fo-karte a.fo-knopf--zweit {
    color: var(--fo-farbe-dunkel);
    background: #fff;
    border-color: var(--fo-linie);
}

.fo-knopf--zweit:hover {
    background: color-mix(in srgb, var(--fo-farbe) 8%, #fff);
    border-color: var(--fo-farbe);
}

.fo-knopf--gefahr,
.fo-karte a.fo-knopf--gefahr {
    color: #fff;
    background: var(--fo-fehler);
    border-color: var(--fo-fehler);
}

.fo-knopf--gefahr:hover {
    background: #8c1d18;
    border-color: #8c1d18;
}

.fo-knopf--klein {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Mehrere Knöpfe nebeneinander, auf dem Handy untereinander. */
.fo-knopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.fo-knopfzeile .fo-knopf { margin-top: 0; }

/* ---------------------------------------------------------------- Auswahl */

/* Eine von mehreren Möglichkeiten, jede mit Titel und einer Zeile dazu. */
.fo-wahl {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
}

.fo-wahl label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.7rem;
    align-items: start;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--fo-linie);
    border-radius: var(--fo-radius-klein);
    cursor: pointer;
    transition: border-color var(--fo-dauer), background-color var(--fo-dauer);
}

.fo-wahl label:hover { border-color: var(--fo-leise); }

.fo-wahl label:has(input:checked) {
    border-color: var(--fo-farbe);
    background: color-mix(in srgb, var(--fo-farbe) 7%, #fff);
}

.fo-wahl input {
    grid-row: span 2;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.25rem;
    accent-color: var(--fo-farbe);
}

.fo-wahl strong { font-weight: 600; }

.fo-wahl span {
    grid-column: 2;
    font-size: 0.875rem;
    color: var(--fo-leise);
}

/* Bild in der Mitte (QR-Code). */
.fo-bild {
    display: block;
    max-width: 200px;
    height: auto;
    margin: 0 auto 0.75rem;
}

/* Zeichenfolge zum Abtippen (Schlüssel, Kennung). */
.fo-zeichen {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.9rem;
    text-align: center;
    overflow-wrap: anywhere;
    background: var(--fo-grund);
    border-radius: var(--fo-radius-klein);
}

/* ------------------------------------------------------ Kasten, Angaben */

/* Abgesetzter Block im Blatt: Zusammenfassung, Hinweis, Datenschutz. */
.fo-kasten {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    background: var(--fo-grund);
    border-radius: var(--fo-radius-klein);
}

.fo-kasten > :last-child { margin-bottom: 0; }

/* Überschrift eines Kastens mit Auswahl darunter. */
.fo-kasten > label:first-child {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.fo-kasten .fo-feld { margin-bottom: 0.5rem; }
.fo-kasten .fo-haken small { display: block; }

.fo-kasten h3 {
    margin: 1rem 0 0.25rem;
    font-size: 1rem;
}

.fo-kasten > h3:first-child { margin-top: 0; }

.fo-kasten ul {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
}

.fo-kasten p { margin: 0 0 0.75rem; }

/* Beschriftung und Wert untereinander gereiht (Name, IBAN, Betrag). */
.fo-angaben {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1.25rem;
}

.fo-angaben dt { color: var(--fo-leise); }

.fo-angaben dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- Fenster über der Seite */

/* Rückfrage vor dem Absenden. Offen sperrt body.fo-fenster-offen das
   Blättern der Seite dahinter. */
.fo-fenster {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 28, 32, 0.55);
}

.fo-fenster-blatt {
    width: 100%;
    max-width: 30rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--fo-radius);
    border-left: 6px solid var(--fo-farbe);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
}

.fo-fenster-blatt h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.fo-fenster-blatt p { margin: 0 0 0.75rem; }
.fo-fenster-blatt ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.fo-fenster-blatt .fo-knopfzeile { justify-content: flex-end; margin-top: 1.25rem; }

body.fo-fenster-offen { overflow: hidden; }

/* Zeile unter dem Blatt: Link zurück, Kleingedrucktes. */
.fo-fuss {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
    text-align: center;
    color: var(--fo-leise);
}

.fo-fuss a { color: var(--fo-leise); }

.fo-leise { color: var(--fo-leise); }

.fo-klein { font-size: 0.875rem; }

@media (max-width: 480px) {
    .fo-seite { padding: 1.25rem 0.75rem 3rem; }
    .fo-karte { padding: 1.5rem 1.1rem 1.25rem; }
    .fo-knopf { align-self: stretch; }
    .fo-knopfzeile .fo-knopf { flex: 1 1 100%; }
    .fo-reihe,
    .fo-reihe--plz { grid-template-columns: 1fr; }
    .fo-feld--menge { grid-template-columns: 1fr 5.5rem; }
    .fo-angaben { grid-template-columns: 1fr; gap: 0 ; }
    .fo-angaben dd { margin-bottom: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}