/*
 * COD Button - einheitliches Button-System fuer das Elementor-Widget "COD Button".
 * Nutzt ausschliesslich bereits bestehende zentrale Design-Tokens (--cod-color-*,
 * --cod-success/-warning/-danger, --cod-button-radius, --cod-font-button-*),
 * geliefert ueber cod-embed-live-tokens (siehe cod_embed_enqueue_button_assets()).
 * Hex-Werte sind NUR die letzte Fallback-Absicherung, falls ein Token fehlt.
 */

:root{
    --cod-btn-radius: var(--cod-button-radius, 12px);
    --cod-btn-shadow: 0 4px 12px rgba(31,65,102,.16);
    --cod-btn-shadow-hover: 0 6px 18px rgba(31,65,102,.22);
}

.cod-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid transparent;
    border-radius: var(--cod-btn-radius);
    font-family: var(--cod-font-button, inherit);
    font-size: var(--cod-font-button-size, .875rem);
    font-weight: var(--cod-font-button-weight, 700);
    line-height: var(--cod-font-button-lh, 1.2);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--cod-btn-shadow);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Als <button> gerendert (Erstellen-Buttons): Theme-/UA-Optik neutralisieren.
   Die Variante darunter setzt background/border/color, daher hier nichts davon. */
button.cod-btn{
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.cod-btn:hover,
.cod-btn:focus-visible{
    transform: translateY(-1px);
    box-shadow: var(--cod-btn-shadow-hover);
    text-decoration: none;
}

.cod-btn:active{
    transform: translateY(0);
    box-shadow: var(--cod-btn-shadow);
}

/* Varianten -------------------------------------------------------------- */

/* Primär/Sekundär sind vom Betreiber im Dashboard steuerbar
   (Brand-Rollen btnPrimaryBg/Text, btnSecondaryBg/Text -> --cod-btn-*-Vars).
   Fallback = bisherige Werte, also optisch unverändert bis gesetzt. */
.cod-btn--primary{
    background: var(--cod-btn-primary-bg, var(--cod-color-accent-blue, #3598DB));
    border-color: var(--cod-btn-primary-bg, var(--cod-color-accent-blue, #3598DB));
    color: var(--cod-btn-primary-text, #fff);
}
/* Hover primär: eigene Hover-Farben; ohne Setzung = wie Normalzustand (nur der
   generische Lift aus .cod-btn:hover), also optisch unverändert. */
.cod-btn--primary:hover,
.cod-btn--primary:focus-visible{
    background: var(--cod-btn-primary-hover-bg, var(--cod-btn-primary-bg, var(--cod-color-accent-blue, #3598DB)));
    border-color: var(--cod-btn-primary-hover-bg, var(--cod-btn-primary-bg, var(--cod-color-accent-blue, #3598DB)));
    color: var(--cod-btn-primary-hover-text, var(--cod-btn-primary-text, #fff));
}

.cod-btn--secondary{
    background: var(--cod-btn-secondary-bg, transparent);
    border-color: var(--cod-btn-secondary-text, var(--cod-color-secondary, #1f4166));
    color: var(--cod-btn-secondary-text, var(--cod-color-secondary, #1f4166));
    box-shadow: none;
}
/* Hover sekundär: eigene Hover-Farben; ohne Setzung = bisheriges Verhalten
   (Fläche füllt mit Sekundärfarbe, Schrift weiß). */
.cod-btn--secondary:hover,
.cod-btn--secondary:focus-visible{
    background: var(--cod-btn-secondary-hover-bg, var(--cod-btn-secondary-bg, var(--cod-color-secondary, #1f4166)));
    color: var(--cod-btn-secondary-hover-text, #fff);
    box-shadow: none;
}

.cod-btn--success{
    background: var(--cod-success, #1f9d67);
    border-color: var(--cod-success, #1f9d67);
    color: #fff;
}

.cod-btn--warning{
    background: var(--cod-warning, #c98a00);
    border-color: var(--cod-warning, #c98a00);
    color: #fff;
}

.cod-btn--danger{
    background: var(--cod-danger, #C13A2B);
    border-color: var(--cod-danger, #C13A2B);
    color: #fff;
}

/* Groessen ---------------------------------------------------------------- */

.cod-btn--sm{ padding: 6px 14px; font-size: .8rem; }
.cod-btn--md{ padding: 10px 20px; }
.cod-btn--lg{ padding: 14px 28px; font-size: 1rem; }

/* Volle Breite / Ausrichtung ---------------------------------------------- */

.cod-btn--block{ display: flex; width: 100%; }

.cod-btn-wrap{ display: flex; }

/* Icon --------------------------------------------------------------------- */

.cod-btn__icon{ display: inline-flex; line-height: 1; font-size: 1.05em; }
.cod-btn__icon svg{ width: 1em; height: 1em; fill: currentColor; }

/* Erstellen-Button (Elementor-Widgets) ------------------------------------- */
/* Wartet der Button auf sein Ziel-Element (data-cod-create-mount), ist er noch
   hidden. .cod-btn-wrap{display:flex} wuerde das UA-[hidden]{display:none}
   ueberstimmen -> hier explizit zuruecknehmen. */
.cod-create-btn-wrap[hidden]{ display: none !important; }

/* width:100% ist im normalen Fluss ein No-Op, sorgt aber dafuer, dass die
   Ausrichtung auch greift, wenn der Button in ein Grid montiert wurde
   (Gewinnspiele-Hero: justify-items:center wuerde ihn sonst schrumpfen lassen).

   justify-content MUSS hier stehen: Elementor schreibt fuer einen Control-Wert,
   der dem Default entspricht, KEINE Regel ins Post-CSS. Der Ausrichtungs-Regler
   (Default "Mitte") waere sonst wirkungslos und der Button linksbuendig. Ein
   abweichend gewaehlter Wert ueberschreibt die Regel hier per {{WRAPPER}}. */
.cod-create-btn-wrap{ flex-wrap: wrap; width: 100%; justify-content: center; }

/* Wartet auf den Creator-Hub (Chat-Bootstrap laeuft noch). */
.cod-create-btn[aria-busy="true"]{ opacity: .65; cursor: progress; }
.cod-create-btn:disabled{ pointer-events: none; }

/* Plus an der Sektion-Ueberschrift ----------------------------------------- */
/* Alternative Darstellung des Erstellen-Buttons: ein kleines rundes Plus direkt
   hinter dem Ueberschrift-Text (statt eines eigenen Buttons darunter). Es sitzt
   IM Titel-Element, damit es mit der Ueberschrift mitwaechst - alle Masse in em.
   Klick-Logik ist identisch (data-cod-create-view, cod-create-button.js). */
.cod-create-plus{
    /* Kantenlaenge an EINER Stelle - die Hochstellung leitet sich daraus ab,
       damit ein groesseres Plus automatisch hoeher sitzt (Stil-Regler setzt
       --cod-create-plus-size, in em oder px). */
    --cod-create-plus-dim: var(--cod-create-plus-size, .62em);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* PFLICHT zuerst: <button> erbt die Schriftgroesse NICHT vom Elternelement -
       der Browser setzt ~13px. Ohne das rechnen alle em-Masse unten gegen 13px
       statt gegen die Ueberschrift; das Plus bliebe winzig und kaum hochgestellt. */
    font-size: inherit;
    line-height: 1;
    width:  var(--cod-create-plus-dim);
    height: var(--cod-create-plus-dim);

    /* Das Plus darf die MITTIGKEIT der Ueberschrift nicht verschieben: als
       Inline-Element wuerde seine Breite in die Zeilenbreite einrechnen und den
       zentrierten Text nach links druecken. Die negative rechte Aussenkante hebt
       den eigenen Platzbedarf (Breite + linker Abstand) exakt wieder auf -> netto
       null Vorschub. Optisch haengt das Plus damit rechts ueber dem Text. */
    margin-left: .2em;
    margin-right: calc((var(--cod-create-plus-dim) + .2em) * -1);

    /* Hochgestellt wie eine Marginalie, ohne die Zeilenhoehe zu veraendern. */
    position: relative;
    top: calc(var(--cod-create-plus-dim) * -0.95);
    vertical-align: baseline;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cod-create-plus-bg, var(--cod-color-accent-blue, #3598DB));
    color: var(--cod-create-plus-color, #fff);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(31, 65, 102, .18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Wartet das Plus auf sein Ziel-Element (data-cod-create-mount, Gewinnspiele-Hero),
   ist es noch hidden. display:inline-flex oben wuerde das UA-[hidden]{display:none}
   ueberstimmen -> hier explizit zuruecknehmen. */
.cod-create-plus[hidden]{ display: none !important; }

/* Immer das Plus - kein waehlbares Icon (siehe cod_create_plus_html). */
/* Trefferfläche auf Touch: 44 x 44 px, ohne das Plus selbst zu vergrössern.
   Gemessen am 02.08.2026 auf der Startseite: das sichtbare Plus misst 19,8 x
   19,8 px - weit unter der Mindestgrösse. Es sitzt hochgestellt neben einer
   Überschrift, wo daneben nichts anderes anklickbar ist; genau dort trifft man
   mit dem Daumen vorbei, ohne dass irgendetwas passiert.

   position: relative steht am Plus bereits (für die Hochstellung) - der Anker
   ist also vorhanden und wird hier NICHT neu gesetzt. ::after ist frei, das
   Plus-Zeichen ist ein eigenes <svg>. */
@media (pointer: coarse){
    .cod-create-plus::after{
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
    }
}

.cod-create-plus svg{
    width: 58%;
    height: 58%;
    display: block;
    fill: none;
    stroke: currentColor;
}

.cod-create-plus:hover,
.cod-create-plus:focus-visible{
    transform: scale(1.09);
    box-shadow: 0 4px 12px rgba(31, 65, 102, .26);
}

.cod-create-plus:active{
    transform: scale(1);
}

.cod-create-plus[aria-busy="true"]{ opacity: .65; cursor: progress; }
.cod-create-plus:disabled{ pointer-events: none; }

/* Überhang auffangen, damit das Plus im Bild bleibt.
   Die negative rechte Außenkante oben hält die Überschrift mittig — genau
   deshalb kennt der Zeilenumbruch den Platzbedarf des Plus aber nicht. Füllt
   der Titel die volle Breite, hängt das Plus über den Rand hinaus und wird
   abgeschnitten. Der Titel bekommt darum GENAU diesen Überhang als
   Innenabstand, und zwar auf BEIDEN Seiten: so bleibt der Text weiterhin exakt
   mittig (die Mittigkeit war und bleibt unberührt), der Umbruch kommt eine Spur
   früher und das Plus steht immer im sichtbaren Bereich. Greift nur dort, wo
   wirklich ein Plus sitzt (:has). */
.cod-design-heading__title:has(> .cod-create-plus),
.angebote-title:has(> .cod-create-plus){
    box-sizing: border-box;
    max-width: 100%;
    padding-inline: calc(var(--cod-create-plus-size, .62em) + .2em);
}