/* cod-embed: Crowdfunding-Widget (Stufe B).
 *
 * ANGEGLICHEN AM 18.08.2026 an Angebot, Gewinnspiel, Partner und Academy.
 * Crowdfunding war die einzige Inhaltskarte ohne Design-Durchgang: Bild 16:9
 * statt 1,4258, Radius 16 statt 10, Knopf 46,5 px mit Pillenform statt 40 px
 * mit Radius 8, und der Titel stand auf allen vier Breiten starr auf 18 px,
 * während die Nachbarn mitwachsen. Alle Soll-Werte sind am gerenderten DOM
 * derselben Startseite gemessen, nicht aus der Doku zitiert.
 *
 * ZWEI TOKEN-NAMEN WAREN FALSCH, und beide fielen still auf einen Rückfallwert:
 *  - Die Kartenfläche fragte --cod-color-bg-card ab. Dieses Token gibt es
 *    nicht; das der Nachbarn heißt --cod-card-bg (live #FDFCFA). Die Karte
 *    stand deshalb als einzige auf reinem Weiß.
 *  - Der Knopf fällt auf --cod-color-accent-blue zurück. Der Name behauptet
 *    Blau, die Variable trägt aber die AKZENTFARBE aus dem Betreiber-Dashboard
 *    (Rolle "accent"), live #FB4C95. Das bleibt am 18.08.2026 ausdrücklich so
 *    gewollt: Der Spenden-Knopf trägt die Akzentfarbe des Dashboards, nicht die
 *    Knopfrolle der Nachbarn. Wer das ändern will, ändert die Rolle im
 *    Dashboard - nicht diese Datei.
 *
 * DIE SKALIERUNG hängt an --cod-card-ui-scale. Die Variable steht NICHT
 * global auf 1, auch wenn ein grep das nahelegt: cod-partner-card-scale.js
 * setzt sie je Karte auf Kartenbreite/360 (gemessen 0,839 bei 390 px). Ohne
 * den Aufruf aus dem Widget bleibt sie leer und jede calc()-Rechnung hier ist
 * wirkungslos - der Rückfall 1 sieht dann aus wie eine greifende Regel.
 */

.cod-embed-crowdfunding-wrap {
    margin: 14px 0;
}

.cod-cf-embed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--cod-cf-col-min, 280px), 1fr));
    gap: var(--cod-cf-gap, 20px);
    /* Gleiche Höhe je Zeile - wie bei den Nachbarn. Wirkt nur innerhalb
       EINES Rasters, über Rastergrenzen hinweg hilft es nicht. */
    grid-auto-rows: 1fr;
}

/* Breite: dieselbe Kopplung wie Angebot, Gewinnspiel und Events. Die 88 px
   stammen vom Partner-Karussell (Owl-Element 100vw - 44, Karte darin 22 px
   Rand je Seite) - ein gekoppelter Wert, kein freier. Und `max-width` erlaubt
   eine Breite, es fordert keine: ohne `width: 100%` füllt die Karte ihre
   Spalte nicht aus. */
.cod-cf-embed-grid > .cod-cf-embed-card {
    width: 100%;
    max-width: min(calc(100% - 12px), calc(100vw - 88px));
    margin-left: auto;
    margin-right: auto;
}

.cod-cf-embed-card {
    display: flex;
    flex-direction: column;
    background: var(--cod-cf-card-bg, var(--cod-card-bg, #ffffff));
    /* Rahmen ist Vorgabe 0 wie bei Angebot, Gewinnspiel und Partner - die
       Karte trägt einen Schatten, ein zweiter Abschluss ist doppelt gemoppelt.
       Der Regler bleibt: wer einen Rahmen will, stellt eine Breite ein. */
    border: var(--cod-cf-card-border-width, 0) solid var(--cod-cf-card-border, var(--cod-color-border, #e6eaf0));
    border-radius: var(--cod-cf-card-radius, var(--cod-card-radius, 10px));
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(31, 65, 102, 0.08);
    font-family: var(--cod-font-body, system-ui, sans-serif);
    color: var(--cod-color-text, #4d4d4d);
}

/* Bildformat: 1,4258 (365x256, praktisch 10:7) - dasselbe wie Angebot,
   Gewinnspiel und Partner, alle drei nachgemessen. Die Zahl steht hier
   ABSICHTLICH direkt und nicht in einer Variablen mit Rückfallwert:
   --cod-card-ratio steht plattformweit auf `auto`, und var() nimmt dann
   diesen Wert statt des Rückfalls - die Bildhülle kollabierte dabei schon
   einmal auf Höhe 0. */
.cod-cf-embed-card-media {
    aspect-ratio: 365 / 256;
    background: var(--cod-color-bg-soft, #f3f6fb);
    overflow: hidden;
}

.cod-cf-embed-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cod-cf-embed-card-body {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--cod-card-ui-scale, 1));
    padding: calc(16px * var(--cod-card-ui-scale, 1));
    /* Die Knopfreihe soll unten sitzen, auch wenn der Teaser kurz ist -
       sonst stehen in einer Zeile mit gleich hohen Karten die Knöpfe auf
       verschiedenen Höhen. */
    flex: 1 1 auto;
}

.cod-cf-embed-card-title {
    margin: 0;
    /* 20 px bei voller Kartenbreite, mitwachsend - wie die Nachbarn. Die
       Untergrenze verhindert, dass auf einem 360-px-Schirm 9 px herauskommen;
       sie steht plattformweit in --cod-card-min-font.
       1.25rem steht hier ABSICHTLICH direkt: Der erste Anlauf am 18.08.2026
       nahm --cod-font-card-title-size als Zwischenschritt, und dieses Token
       ist KONTEXTABHÄNGIG - am Angebots-Widget 1.25rem, am Crowdfunding-Widget
       2.0rem. Der Titel kam dadurch mit 31,5 statt 20 px heraus und wurde
       abgeschnitten. Ein Token, das je Widget etwas anderes traegt, taugt
       nicht als gemeinsamer Rueckfall. */
    font-size: max(
        var(--cod-card-min-font, 13px),
        calc(var(--cod-cf-title-size, 1.25rem) * var(--cod-card-ui-scale, 1))
    );
    font-weight: 700;
    line-height: 1.3;
    color: var(--cod-cf-title-color, var(--cod-title-color, #1f4166));
    font-family: var(--cod-cf-title-font, var(--cod-font-card-title, var(--cod-font-headline-sub, system-ui, sans-serif)));
}

.cod-cf-embed-card-teaser {
    margin: 0;
    font-size: max(
        var(--cod-card-min-font, 13px),
        calc(var(--cod-cf-text-size, 1rem) * var(--cod-card-ui-scale, 1))
    );
    line-height: 1.5;
    color: var(--cod-cf-text-color, var(--cod-color-text-soft, #6b7585));
}

.cod-cf-embed-progress {
    height: calc(8px * var(--cod-card-ui-scale, 1));
    width: 100%;
    background: var(--cod-cf-progress-track, var(--cod-color-bg-soft, #eef2f8));
    border-radius: 999px;
    overflow: hidden;
}

.cod-cf-embed-progress-bar {
    display: block;
    height: 100%;
    background: var(--cod-cf-progress-bar, var(--cod-color-accent-blue, #3598db));
    border-radius: 999px;
    transition: width 0.4s ease;
}

.cod-cf-embed-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.cod-cf-embed-raised {
    font-weight: 700;
    font-size: max(
        var(--cod-card-min-font, 13px),
        calc(1.0625rem * var(--cod-card-ui-scale, 1))
    );
    color: var(--cod-cf-raised-color, var(--cod-title-color, #1f4166));
}

/* Meta-Zeile: Frist, Gegenleistungen, Unterstützer - dieselbe Rolle wie Ort
   und Zeit bei den Events. Sie bricht um statt zu überlaufen, und die Teile
   trennt ein Mittelpunkt, der beim Umbruch mitgeht.
   `flex-wrap` und keine Media-Query: Es entscheidet der Platz, den die Karte
   wirklich hat - bei drei Spalten auf 1440 px ist sie so schmal wie auf einem
   Handy, und eine Fensterbreiten-Abfrage läge dort falsch. */
.cod-cf-embed-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(4px * var(--cod-card-ui-scale, 1)) calc(8px * var(--cod-card-ui-scale, 1));
}

.cod-cf-embed-meta > * + *::before {
    content: "·";
    margin-right: calc(8px * var(--cod-card-ui-scale, 1));
    color: var(--cod-color-text-soft, #6b7585);
}

.cod-cf-embed-goal,
.cod-cf-embed-goodies,
.cod-cf-embed-supporters,
.cod-cf-embed-frist {
    font-size: max(
        var(--cod-card-min-font, 13px),
        calc(0.875rem * var(--cod-card-ui-scale, 1))
    );
    color: var(--cod-color-text-soft, #6b7585);
}

/* Eine Kampagne ohne Frist gibt es; eine abgelaufene soll sie aber sichtbar
   tragen. */
.cod-cf-embed-frist--knapp {
    color: var(--cod-color-warning, #b4531a);
    font-weight: 600;
}

/* "Jetzt spenden": Form und Mass wie bei den Nachbarn (40 px hoch, Radius 8,
   Gewicht 400, Knopfschrift), FARBE bewusst die Akzentfarbe des Dashboards -
   siehe Kopf dieser Datei. Die Höhe steht jetzt als min-height da und entsteht
   nicht mehr zufällig aus dem Innenabstand; 46,5 px waren das Ergebnis von
   12 px Polster auf 15 px Schrift. */
.cod-cf-embed-donate {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(40px * var(--cod-card-ui-scale, 1));
    padding: 0 calc(16px * var(--cod-card-ui-scale, 1));
    border: 0;
    border-radius: var(--cod-cf-btn-radius, 8px);
    font-size: max(
        var(--cod-card-min-font, 13px),
        calc(var(--cod-cf-btn-size, 1rem) * var(--cod-card-ui-scale, 1))
    );
    font-weight: 400;
    /* Schriftart: eigener Regler zuerst, sonst die KARTENÜBERSCHRIFT.
       --cod-font-btn-angebot wäre der naheliegende Rückfall und ist der
       falsche: Das Token trägt global "Arial Rounded MT Regular", während das
       Angebots-Widget es per Regler auf "Bold" stellt. Der Spenden-Knopf stand
       dadurch am 18.08.2026 in einem anderen Schnitt als der Knopf der
       Nachbarkarte - dasselbe Token, zwei Werte auf einer Seite.
       --cod-font-card-title trägt im Kartenzusammenhang den passenden Schnitt
       und folgt der Einstellung des Betreibers weiterhin. */
    font-family: var(--cod-cf-btn-font, var(--cod-font-card-title, var(--cod-font-headline-sub, system-ui, sans-serif)));
    cursor: pointer;
    color: var(--cod-cf-btn-color, #ffffff);
    background: var(--cod-cf-btn-bg, var(--cod-color-accent-blue, #3598db));
    transition: filter 0.15s ease, transform 0.05s ease;
}

/* Trefferfläche auf Berührgeräten: mindestens 44 px. Die Regel fragt das
   Zeigegerät, nicht die Fensterbreite - ein schmales Fenster am Schreibtisch
   ist kein Handy, und ein Tablet in Querlage ist eines. */
@media (pointer: coarse) {
    .cod-cf-embed-donate {
        min-height: 44px;
    }
}

.cod-cf-embed-donate:hover {
    filter: brightness(0.95);
}

.cod-cf-embed-donate:active {
    transform: translateY(1px);
}

.cod-cf-embed-donate[aria-busy="true"] {
    opacity: 0.7;
    pointer-events: none;
}

/* Teilen-Symbol im Bild unten rechts. Es erzeugt den Deep-Link
   ?kampagne=<slug>, den es seit jeher gibt und den bis zum 18.08.2026 niemand
   erzeugen konnte.
   MASSE UND FORM SIND GEMESSEN, nicht aus dem Standard zitiert: Der nennt
   "39x39, 16 px vom Rand" - und schweigt zum Radius. Alle drei Nachbarn haben
   Radius 8 (Angebot 42x42 bei 10 px Abstand, Gewinnspiel 39x39 bei 16 px,
   Academy 40x40 in der Knopfreihe). Ein erster Entwurf hatte 50 % und wäre als
   einziges rundes Symbol auf der Seite gestanden. Vorbild ist das Gewinnspiel:
   dieselbe Grösse, derselbe Abstand, weisse Fläche mit farbigem Symbol. */
.cod-cf-embed-card-media {
    position: relative;
}

.cod-cf-embed-share {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: var(--cod-cf-share-bg, #ffffff);
    /* NICHT --cod-color-accent-blue: Der Name behauptet Blau, die Variable
       trägt live #FB4C95 (die Akzentfarbe des Dashboards). --cod-cta ist die
       Handlungsfarbe und steht live auf #3598DB - dieselbe Farbe, in der auch
       Gewinnspiel und Academy ihr Teilen-Symbol zeigen. Der Spenden-Knopf
       behält den Akzent, das Nebenelement bleibt blau wie bei den Nachbarn. */
    color: var(--cod-cf-share-color, var(--cod-cta, #3598db));
    box-shadow: 0 2px 8px rgba(31, 65, 102, 0.18);
    transition: filter 0.15s ease, transform 0.05s ease;
}

.cod-cf-embed-share:hover {
    filter: brightness(0.96);
}

.cod-cf-embed-share:active {
    transform: translateY(1px);
}

/* DAS SYMBOL IST DAS DER PLATTFORM, NICHT EIN EIGENES (19.08.2026 nachgezogen).
   Der erste Entwurf zeichnete ein eigenes SVG ins Markup und setzte seine
   Grösse fest auf 23 px - beides erfunden. Angebot, Gewinnspiel und Academy
   nehmen alle `share-solid-full.svg` als CSS-MASKE und ihre Grösse aus
   --cod-angebot-share-glyph-size (22 px), skaliert mit der Karte. Für dieses
   Token gibt es sogar einen Elementor-Regler; eine feste Zahl hier hätte ihn
   stillschweigend ausgehebelt.
   Über die Maske färbt `background-color` das Symbol - deshalb currentColor,
   und die Farbe steht einmal am Knopf. */
.cod-cf-embed-share::before {
    content: "";
    display: block;
    width: calc(var(--cod-angebot-share-glyph-size, 22px) * var(--cod-card-ui-scale, 1));
    height: calc(var(--cod-angebot-share-glyph-size, 22px) * var(--cod-card-ui-scale, 1));
    background-color: currentColor;
    -webkit-mask: url(../svg/share-solid-full.svg) center/contain no-repeat;
    mask: url(../svg/share-solid-full.svg) center/contain no-repeat;
    flex: 0 0 auto;
}

/* Ein Inline-SVG aus einer älteren Markup-Fassung wird ausgeblendet. So ist die
   Reihenfolge der beiden Deploys egal: Käme das CSS zuerst, stünden sonst für
   ein paar Sekunden ZWEI Symbole nebeneinander. */
.cod-cf-embed-share > svg {
    display: none;
}

@media (max-width: 480px) {
    .cod-cf-embed-share {
        width: 34px;
        height: 34px;
    }
}

/* Trefferfläche auf Berührgeräten. 34 bzw. 39 px sind für den Finger zu klein;
   vergrössert wird über ein unsichtbares Feld um das Symbol herum, damit die
   sichtbare Grösse dieselbe bleibt wie bei den Nachbarn. */
@media (pointer: coarse) {
    .cod-cf-embed-share::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

.cod-cf-embed-empty {
    grid-column: 1 / -1;
    padding: 28px;
    text-align: center;
    color: var(--cod-color-text-soft, #6b7585);
    background: var(--cod-color-bg-soft, #f3f6fb);
    border-radius: var(--cod-cf-card-radius, var(--cod-card-radius, 10px));
    font-family: var(--cod-font-body, system-ui, sans-serif);
}

.cod-cf-embed-sentinel {
    width: 100%;
    height: 1px;
}