.form-fieldset {
    border: 0;
    width: 100%;
    max-width: 800px;
}
.form-fieldset-label {
    padding: 16px 0;
    font-size: 1.25em;
    font-weight: 600;
}
.form-row {
    display: flex;
}
.form-row > div {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    margin-right: 20px;
}
.form-row > div:last-child {
    margin-right: 0;
}
@media only screen and (max-width: 800px) {
    .form-row {
        flex-direction: column;
    }
    .form-row > div {
        flex: 1 1 100%;
        max-width: 100%;
        margin-right: 0;
    }
}
.form-group,
.btn-group {
    max-width: 100%;
    margin-bottom:1em;
    overflow:hidden;
}
.btn-group .previous{margin-right:24px;}

.form-group-show_company_name {
    margin-top: 1em;
}
.form-group-company_name {
    max-width: 100%;
    transition: max-width 400ms;
}
.form-group-company_name.hidden-by-sliding-left {
    max-width: 0;
}
label.form-check-label {
    width:100%;
}
.inputs-list .radio {
    overflow:hidden;
}
input[type="radio"] {
    margin-right:1em;
}

/* show labels as coloured buttons */
.show-labels-as-coloured-buttons {
    display: flex;
    flex-wrap: wrap;
}
.show-labels-as-coloured-buttons .form-check {
    margin-right: 8px;
    border-top: none;
}
.form-group-amount .show-labels-as-coloured-buttons .form-check {
    flex: 1 1 90px;
    max-width: 90px;
}
.show-labels-as-coloured-buttons .form-check-label {
    padding: 12px 16px 12px 16px;
    background-color: #094f9e;
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    letter-spacing: .5px;
    cursor: pointer;
}
.show-labels-as-coloured-buttons .form-check-label:has(input:checked) {
    background-color:#F45E5E;
    color:white;
}
.show-labels-as-coloured-buttons .form-check-label input[type="radio"] {
    position: absolute;
    z-index: -10;
    visibility: hidden;
}
.form-group-amount .form-check.contains-input-field {
    flex:1 1 166px;
    max-width:166px;
}
.form-check.contains-input-field .input-group {
    display: flex;
}
.form-check.contains-input-field input[type="number"] {
    padding-top: 12px;
    padding-bottom: 11px;
    padding-left: 20px;
}
.show-labels-as-coloured-buttons .form-check.contains-input-field {
    position: relative;
}
.show-labels-as-coloured-buttons .form-check.contains-input-field input[type="number"] {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color:white;
    font-weight: 600;
}
.show-labels-as-coloured-buttons .form-check.contains-input-field input[type="number"]::placeholder {
    color: white;
    font-weight: 600;
    text-align: left;
}
.show-labels-as-coloured-buttons .form-check.contains-input-field .form-check-label {
    padding: 0;
    background-color: #094f9e;
}
.show-labels-as-coloured-buttons .form-check.contains-input-field .form-check-label:has(input:checked) {
    background-color: #f95050;
    color: white;
}
.show-labels-as-coloured-buttons .form-check.contains-input-field .input-group-addon {
    position: absolute;
    top: 0;
    right: -16px;
    padding: 11px 0 0 2px;
    border: none;
    background-color: transparent;
    color: #202020;
    font-size: 18px;
    font-weight: 600;
}

/* progress bar */
.progress {
    height: 44px;
    margin-bottom: 0;
    border: unset;
    border-radius: unset;
    box-shadow: unset;
    background-color: #ccc;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    padding-top: 5px;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    overflow: hidden;
    transition: width 1s ease;
}
.progress-bar span {
    font-size: 20px;
    line-height: 30px;
}
.donation-goal p {
    margin-bottom: 0;
}

.finisher-confirmation-message {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

.toggle-next-fieldset {
    cursor: pointer;
    color: #8da700;
}

.inpersoneventform > h2 {
    visibility: hidden;
    height: 0;
}

.orderform-veto .form-group-amountstatictext {
    padding-top: 18px;
}
.orderform-veto .form-group-amountstatictext p {
    line-height: 1.4;
}

/* ── Spendenformular: Zwei-Klick-Einwilligung ─────────────────────────────────
   Markup baut .../custom_forms/Resources/Public/JavaScript/donateActivate.js,
   eingehängt in .../Resources/Private/Templates/Fundraisingbox/Donationform.html.

   ⚠️⚠️ DIE WERTE SIND ABSICHTLICH DIESELBEN wie bei den beiden Geschwistern —
   wer hier etwas ändert, ändert es dort mit, sonst laufen die drei Flächen
   auseinander:
     Karte: .../md_events/Resources/Public/Css/listMap.css        (.map-activate)
     Video: .../custom_md2022/Resources/Public/Css/styles-plugins.css
            .../custom_sprezu/Resources/Public/Css/styles.css     (.video-shariff-preview-*)
   Gemeinsam sind: Symbol 3rem, Lücke 0.625rem, Anbieterband 0.8125rem/700,
   Hinweisband max 32rem mit 1rem Abstand und 0.625rem/1rem Innenabstand,
   Kopfzeile 1.125rem, Hinweis fett mit 0.25rem Abstand, Schleier weiß 0.2.

   Diese Datei liegt über page.includeCSS.custom_forms ohnehin auf jeder Seite
   jeder Site — deshalb steht der Block hier und nicht doppelt in den
   Sitepackages. Der Cache-Buster ist die mtime, hier gibt es also NICHTS von
   Hand hochzuzählen (anders als bei der JS-Datei und bei md_events).           */

/* ── Stellschrauben: das Einzige, was eine Site überschreiben sollte ── */
.donate-embed {
    /* f3d1 = money-bill-1, ausgewählt vom User am 10.8.2026.
       ⚠️ Die Glyphe gibt es in FA 6.2.1 Free in ZWEI Schnitten: solid (900,
       gefüllter Schein) und regular (400, nur Umriss). Die Sites binden aber nur
       fontawesome + solid + brands ein — regular.min.css liegt nirgends.
       ⚠️⚠️ Das fällt NICHT auf: gemessen am 10.8.2026 (Chrome 151, örtlicher
       Prüfstand) ergibt font-weight:400 exakt dieselben Maße wie 900. Weil die
       Familie nur einen Schnitt hat, nimmt der CSS-Schriftabgleich ihn auch für
       400 — es bleibt also kein leeres Kästchen stehen, sondern still die SOLIDE
       Form. Wer den Umriss wirklich will, muss regular.min.css einbinden; die
       900 steht hier ausgeschrieben, damit niemand die 400 für den Umriss hält.
       Nachgesehen in .../custom_md2022/…/fontawesome-free-6.2.1-web/metadata/icons.json
       und in den includeCSS-Zweigen beider Sitepackages. */
    --donate-icon: "\f3d1";
    --donate-icon-weight: 900;
    --donate-host: "FundraisingBox (secure.fundraisingbox.com)";
    /* --color-red ist nur in custom_sprezu gesetzt (#ff6157); überall sonst
       greift der Rückfallwert, das MD-Dunkelblau. Genau wie bei der Karte. */
    --donate-icon-color: var(--color-red, #003567);
    --donate-surface-bg: #e9edf1;
    --donate-band-bg: #1271ee;   /* deckend — weiß darauf ergibt 4,54:1 */
    /* Rückmeldung beim Zeigen, derselbe Sprung wie bei den Buttons der Site
       (styles-defaultscreen.css:833/866), beim Video (--video-band-bg-hover) und
       auf der Karte (--map-band-bg-hover). ⚠️ Weiß darauf sind nur noch 3,15:1
       statt 4,54:1 — bewusste Entscheidung des Users am 12.8.2026 zugunsten der
       Einheitlichkeit. Wer sie zurücknimmt, nimmt sie an allen vier Stellen zurück. */
    --donate-band-bg-hover: #2e92ff;
    --donate-band-color: #ffffff;
    --donate-band-radius: 0;     /* mehr-demokratie.de ist eckig */
    /* ⚠️⚠️ EIGENE Stellschraube, NICHT --donate-icon-color mitbenutzen. Die Symbolfarbe
       darf hell sein: sprezu setzt dort sein Rot, und das ergibt als Fokusring auf
       creme nur 2,79:1 — unter den 3:1, die ein Fokusindikator braucht. Gekoppelt
       würde sprezu still schlechter, während md (dunkelblau, 10,5:1 auf der Fläche)
       gut aussieht. Am 12.8.2026 gerechnet. */
    --donate-focus-ring: var(--color-blue, #003567);
    /* Platzhalterhöhe. Das fertige Formular ist höher und wächst per fbResize
       selbst; hier geht es nur darum, dass die Fläche vor dem Klick nicht wie ein
       vergessener Streifen aussieht. Eine Zeile, wenn sie jemand anpassen will. */
    --donate-min-height: 25rem;

    position: relative;
}

.donate-embed .donate-activate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--donate-min-height);
    padding: 0;
    border: 0;
    overflow: hidden;
    cursor: pointer;
    background: var(--donate-surface-bg);
    font: inherit;          /* nimmt eventuelle button-Regeln der Site zurück */
    color: inherit;
    text-align: center;
}
.donate-embed .donate-activate--busy { cursor: progress; }
.donate-embed .donate-activate--error { cursor: pointer; }

/* ⚠️ KEINE Vorschau — hier fehlt absichtlich das Gegenstück zu .map-activate__preview
   (Kartenpunkte) und zum Standbild des Videos. Angedeutete Formularzeilen waren
   gebaut und am 10.8.2026 vom User abgelehnt: „keine vertikalen balken im
   Hintergrund bitte". Die Fläche bleibt einfarbig; wer die Symmetrie zu den
   Geschwistern „repariert", baut genau das zurück, was weg sollte.
   Der Schleier bleibt: er trägt den Aufhell-Wechsel beim Überfahren. */
.donate-embed .donate-activate__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.donate-embed .donate-activate:hover .donate-activate__overlay,
.donate-embed .donate-activate:focus .donate-activate__overlay { background: transparent; }

.donate-embed .donate-activate__group {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 0 1rem;
}
.donate-embed .donate-activate__icon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin: 0 auto;
    color: var(--donate-icon-color);
    font: inherit;
}
.donate-embed .donate-activate__icon::before {
    content: var(--donate-icon);
    font-family: 'Font Awesome 6 Free';
    font-weight: var(--donate-icon-weight);
    font-style: normal;
    font-size: 3rem;
    line-height: 1;
}
/* Ziel des Klicks im Klartext neben dem Symbol, eigener deckender Grund wie beim
   Video. ⚠️ Für Vorlesesoftware ist per CSS erzeugter Text zweite Wahl — der
   lange Hinweis im Band darunter ist echtes Markup und trägt die Aussage allein. */
.donate-embed .donate-activate__icon::after {
    content: var(--donate-host);
    padding: 0.25rem 0.5rem;
    border-radius: var(--donate-band-radius);
    background: var(--donate-band-bg);
    color: var(--donate-band-color);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
}
.donate-embed .donate-activate__text {
    display: block;
    max-width: 32rem;
    margin: 1rem auto 0;
    padding: 0.625rem 1rem;
    border-radius: var(--donate-band-radius);
    background: var(--donate-band-bg);
    color: var(--donate-band-color);
    font-size: 0.9375rem;
    line-height: 1.45;
}
.donate-embed .donate-activate__title {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
}
.donate-embed .donate-activate__hint {
    display: block;
    margin-top: 0.25rem;
    font-weight: 700;
}
/* Rückmeldung an den BÄNDERN — dieselbe wie beim Video und auf der Karte.
   ⚠️⚠️ WARUM NICHT DER SCHLEIER REICHT: die Fläche hat hier bewusst KEINE Vorschau
   (siehe Kasten oben), der Schleier liegt also auf glattem --donate-surface-bg.
   Nachgerechnet am 12.8.2026: 20 % Weiß auf #e9edf1 ergibt #edf1f4 — eine Differenz
   von 4/4/3 Stufen von 255. Der Schleier-Hover ist hier also nicht schwach, sondern
   praktisch nicht vorhanden. Auf der Karte lag wenigstens noch ein Bild darunter.
   Der Schleier bleibt trotzdem: er kostet nichts und trägt, sobald jemand der Fläche
   doch einmal einen Hintergrund gibt. */
.donate-embed .donate-activate__text,
.donate-embed .donate-activate__icon::after { transition: background-color 120ms ease-in-out; }
.donate-embed .donate-activate:hover .donate-activate__text,
.donate-embed .donate-activate:hover .donate-activate__icon::after,
.donate-embed .donate-activate:focus-visible .donate-activate__text,
.donate-embed .donate-activate:focus-visible .donate-activate__icon::after { background: var(--donate-band-bg-hover); }
/* ⚠️⚠️ DUNKEL, NICHT HELL. Bis zum 12.8.2026 stand hier var(--color-light, #fbf8f4),
   also nahezu Weiß — auf --donate-surface-bg (#e9edf1) unsichtbar, der Knopf mit der
   Tastatur damit nicht auffindbar. Dieselbe Stelle war bei Video und Karte genauso
   falsch; alle drei sind am 12.8.2026 zusammen umgestellt worden. */
.donate-embed .donate-activate:focus-visible {
    outline: 0.1875rem solid var(--donate-focus-ring);
    outline-offset: -0.3125rem;
}