/*
* gewinnspiele.css — COD-Embed Stufe B
*
* Enthaelt alle .codgw-* Styles, die zentral per wp_add_inline_style('cod-gewinnspiele', ...)
* ausgegeben werden. Muss mit COD_Gewinnspiele_Plugin::css() + source_embed_css() synchron
* gehalten werden (Stand: Loader-Version 0.5.7).
*
* Die --cod-* Tokens kommen aus embed-design.css (wird vorher geladen).
* Keine hartcodierten Hex-Farben ausserhalb der Fallback-Werte in var().
*/
/* ── Outer-Container: zentrierte weisse Karte (konsistent mit Events-Widget) */
.cod-embed-gws-wrap {
width: 60%;
max-width: 60%;
margin: 0 auto;
background: transparent;
padding: 0;
}
@media (min-width: 768px) and (max-width: 1024px) {
.cod-embed-gws-wrap { width: 94%; max-width: 94%; }
}
@media (max-width: 767px) {
.cod-embed-gws-wrap { width: 96%; max-width: 96%; }
}
/* ── CSS-Variablen ─────────────────────────────────────────────────────────── */
.codgw-wrap,.codgw-draw-wrap,.codgw-past{--codgw-title:var(--cod-title-color,#1f4166);--codgw-text:var(--cod-color-text,#4d4d4d);--codgw-meta:var(--cod-meta,#5a7a99);--codgw-soft:var(--cod-soft,#eef6ff);--codgw-border:var(--cod-border,rgba(31,65,102,.12));--codgw-green:var(--cod-tag-color,#51B36F);--codgw-green-08:var(--codgw-mix-green-08,rgba(81,179,111,.08));--codgw-green-14:var(--codgw-mix-green-14,rgba(81,179,111,.14));--codgw-green-22:var(--codgw-mix-green-22,rgba(81,179,111,.22));--codgw-green-26:var(--codgw-mix-green-26,rgba(81,179,111,.26));--codgw-fab-bg:var(--codgw-mix-accent-70,rgba(53,152,219,.7));--codgw-border-hover:var(--codgw-mix-accent-18,rgba(53,152,219,.18));--codgw-shadow-focus:0 0 0 3px var(--codgw-mix-accent-16,rgba(53,152,219,.16));--codgw-hero-from:var(--cod-gws-banner-from,var(--cod-color-secondary,#14345f));--codgw-hero-to:var(--cod-gws-banner-to,var(--cod-color-accent-blue,#2b86c5));--codgw-hero-eyebrow:var(--cod-gws-banner-eyebrow,var(--codgw-mix-white-96,rgba(255,255,255,.96)));--codgw-hero-title:var(--cod-gws-banner-title,var(--cod-text-on-dark,#fff));--codgw-hero-kicker:var(--cod-gws-banner-kicker,var(--cod-text-on-dark,#fff));--codgw-hero-copy:var(--cod-gws-banner-copy,var(--codgw-mix-white-92,rgba(255,255,255,.92)));--codgw-countdown-label-color:var(--cod-gws-banner-countdown-label,var(--cod-color-text,#4d4d4d));--codgw-countdown-value-color:var(--cod-gws-banner-countdown-value,var(--cod-color-text,#4d4d4d));--codgw-meta-label-color:var(--cod-gws-banner-info-label,var(--cod-color-text,#4d4d4d));--codgw-meta-value-color:var(--cod-gws-banner-info-value,var(--cod-color-text,#4d4d4d));--codgw-winners-label-color:var(--cod-gws-banner-winners-label,var(--cod-color-text,#4d4d4d))}
/* ── Mischfarben baseline-fest (seit 06.08.2026) ──────────────────────────
Basis ist statisches rgba, der @supports-Block darunter hebt dieselben
Namen auf color-mix mit der Live-Branding-Farbe.
WARUM: Unsere Baseline ist Safari/iOS 15.4+. Dort ist color-mix() unbekannt,
und eine Deklaration mit var() darin wird erst "at computed-value time"
ungueltig - das Merkmal faellt dann KOMPLETT weg, nicht auf einen Ersatzwert.
Vorher standen hier 39 solcher Ausdruecke direkt in Deklarationen und in
Variablen ohne Rueckfallwert; auf einem aelteren iPhone verlor damit die
Gewinnspiel-Pille ihren Grund, der Banner seinen Verlauf und die Meldung
ihren Rahmen. Derselbe Fehler wurde am 05.08.2026 in events.css behoben.
Die rgba-Basis traegt den STANDARDWERT der jeweiligen Marken-Farbe, nicht
die eingestellte: In einem alten Safari sieht man also die Hausfarbe statt
der Betreiber-Farbe - aber man sieht etwas. Gleiche Bauart und gleicher
Kompromiss wie bei den --cod-mix-*-Token im Frontend-Bundle. */
:root{--codgw-mix-white-05:rgba(255,255,255,.05);--codgw-mix-white-07:rgba(255,255,255,.07);--codgw-mix-white-08:rgba(255,255,255,.08);--codgw-mix-white-10:rgba(255,255,255,.1);--codgw-mix-white-14:rgba(255,255,255,.14);--codgw-mix-white-16:rgba(255,255,255,.16);--codgw-mix-white-18:rgba(255,255,255,.18);--codgw-mix-white-20:rgba(255,255,255,.2);--codgw-mix-white-24:rgba(255,255,255,.24);--codgw-mix-white-32:rgba(255,255,255,.32);--codgw-mix-white-74:rgba(255,255,255,.74);--codgw-mix-white-80:rgba(255,255,255,.8);--codgw-mix-white-92:rgba(255,255,255,.92);--codgw-mix-white-96:rgba(255,255,255,.96);--codgw-mix-green-08:rgba(81,179,111,.08);--codgw-mix-green-14:rgba(81,179,111,.14);--codgw-mix-green-22:rgba(81,179,111,.22);--codgw-mix-green-26:rgba(81,179,111,.26);--codgw-mix-green-12:rgba(81,179,111,.12);--codgw-mix-green-28:rgba(81,179,111,.28);--codgw-mix-cat-10:rgba(100,116,139,.1);--codgw-mix-accent-16:rgba(53,152,219,.16);--codgw-mix-accent-18:rgba(53,152,219,.18);--codgw-mix-accent-70:rgba(53,152,219,.7);--codgw-mix-ink-20:rgba(31,65,102,.2);--codgw-mix-danger-10:rgba(229,62,62,.1);--codgw-mix-danger-22:rgba(229,62,62,.22)}
@supports (color: color-mix(in srgb, red 50%, transparent)){:root{--codgw-mix-white-05:color-mix(in srgb,var(--cod-text-on-dark,#fff) 5%,transparent);--codgw-mix-white-07:color-mix(in srgb,var(--cod-text-on-dark,#fff) 7%,transparent);--codgw-mix-white-08:color-mix(in srgb,var(--cod-text-on-dark,#fff) 8%,transparent);--codgw-mix-white-10:color-mix(in srgb,var(--cod-text-on-dark,#fff) 10%,transparent);--codgw-mix-white-14:color-mix(in srgb,var(--cod-text-on-dark,#fff) 14%,transparent);--codgw-mix-white-16:color-mix(in srgb,var(--cod-text-on-dark,#fff) 16%,transparent);--codgw-mix-white-18:color-mix(in srgb,var(--cod-text-on-dark,#fff) 18%,transparent);--codgw-mix-white-20:color-mix(in srgb,var(--cod-text-on-dark,#fff) 20%,transparent);--codgw-mix-white-24:color-mix(in srgb,var(--cod-text-on-dark,#fff) 24%,transparent);--codgw-mix-white-32:color-mix(in srgb,var(--cod-text-on-dark,#fff) 32%,transparent);--codgw-mix-white-74:color-mix(in srgb,var(--cod-text-on-dark,#fff) 74%,transparent);--codgw-mix-white-80:color-mix(in srgb,var(--cod-text-on-dark,#fff) 80%,transparent);--codgw-mix-white-92:color-mix(in srgb,var(--cod-text-on-dark,#fff) 92%,transparent);--codgw-mix-white-96:color-mix(in srgb,var(--cod-text-on-dark,#fff) 96%,transparent);--codgw-mix-green-08:color-mix(in srgb,var(--cod-tag-color,#51B36F) 8%,transparent);--codgw-mix-green-14:color-mix(in srgb,var(--cod-tag-color,#51B36F) 14%,transparent);--codgw-mix-green-22:color-mix(in srgb,var(--cod-tag-color,#51B36F) 22%,transparent);--codgw-mix-green-26:color-mix(in srgb,var(--cod-tag-color,#51B36F) 26%,transparent);--codgw-mix-green-12:color-mix(in srgb,var(--cod-tag-color,#51B36F) 12%,transparent);--codgw-mix-green-28:color-mix(in srgb,var(--cod-tag-color,#51B36F) 28%,transparent);--codgw-mix-cat-10:color-mix(in srgb,var(--cod-tag-color,var(--codgw-category-color,#64748b)) 10%,transparent);--codgw-mix-accent-16:color-mix(in srgb,var(--cod-color-accent-blue,#3598DB) 16%,transparent);--codgw-mix-accent-18:color-mix(in srgb,var(--cod-color-accent-blue,#3598DB) 18%,transparent);--codgw-mix-accent-70:color-mix(in srgb,var(--cod-color-accent-blue,#3598DB) 70%,transparent);--codgw-mix-ink-20:color-mix(in srgb,var(--cod-color-secondary,#1f4166) 20%,transparent);--codgw-mix-danger-10:color-mix(in srgb,#e53e3e 10%,transparent);--codgw-mix-danger-22:color-mix(in srgb,#e53e3e 22%,transparent)}}
.codgw-wrap,.codgw-draw-wrap,.codgw-past{display:block;--codgw-card-radius:var(--cod-card-radius,18px);--codgw-kachel-bg:rgba(255,255,255,.62);--codgw-kachel-rand:rgba(31,65,102,.12);--codgw-kachel-tief:rgba(31,65,102,.07);--codgw-button-radius:var(--cod-button-radius,8px);--codgw-pill-radius:var(--cod-pill-radius,999px);--codgw-badge-radius:var(--cod-badge-radius,16px);--codgw-shadow-card:var(--cod-shadow-card,0 14px 32px rgba(21,58,99,.10));--codgw-shadow-action:var(--cod-shadow-input,0 10px 24px rgba(21,58,99,.16));--codgw-shadow-action-hover:var(--cod-shadow-action-hover,0 14px 28px rgba(21,58,99,.18));--codgw-shadow-hover:0 24px 44px rgba(21,58,99,.18);--codgw-shadow-next:0 30px 90px rgba(12,42,79,.24),inset 0 1px 0 rgba(255,255,255,.18);--codgw-shadow-kicker:0 12px 30px rgba(13,54,102,.18);--codgw-shadow-countdown:0 20px 40px rgba(13,54,102,.18);--codgw-shadow-modal:0 30px 80px rgba(21,58,99,.24);--codgw-shadow-title:0 14px 32px rgba(17,56,101,.24);--codgw-shadow-ctext:0 16px 36px rgba(12,52,95,.28);--codgw-shadow-live:0 12px 26px rgba(15,57,104,.24);--codgw-shadow-eyebrow:0 10px 24px rgba(21,58,99,.18);--codgw-shadow-glow-a:0 12px 28px rgba(12,52,95,.28);--codgw-shadow-glow-b:0 12px 28px rgba(12,52,95,.32)}
/* ── Grid + Sentinel ─────────────────────────────────────────────────────── */
.codgw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.codgw-load-sentinel{width:100%;height:1px}
/* ── Debug-Panel (nur Admins) ────────────────────────────────────────────── */
.codgw-debug{margin:0 0 18px}
.codgw-debug-title{margin-bottom:14px}
.codgw-debug-grid{gap:14px}
.codgw-debug-card{padding:14px 16px}
.codgw-debug-value{font-size:18px;font-weight:800}
.codgw-debug-status{font-weight:700}
/* ── Karte ───────────────────────────────────────────────────────────────── */
/* ALLE festen Abstände der Karte stehen hier, und jeder skaliert mit ihr.
Muster der Angebote-Kachel (Widget-Bauplan, Abschnitt 18).
Warum das keine Kosmetik ist - gemessen am 07.08.2026 mit
community-e2e/gws-abstaende-messen.mjs, in Promille der Kartenbreite bei
360 / 390 / 820 / 1440 px:
Karten-Kopf innen 41 38 46 49 (zwei feste Werte, 14 und 18)
Rand der Quell-Kachel 47 43 41 44
Karten-Fuss 41 38 36 38
Titel oben 41 38 36 38
35 Abstände wanderten so. Die Schriften folgten der Karte seit dem
06.08.2026, die Abstände nicht - eine Karte, deren Teile unterschiedlich
stark mitwachsen, ist auf dem Handy eine andere Karte als am Desktop
(Kriterium 16).
Ein Wert hier ist IMMER die Desktop-Zahl mal Skalierung. Wer einen festen
px-Wert in die Karte schreibt, verstellt das Verhältnis auf jedem Gerät,
dessen Karte nicht 360 px breit ist - ohne dass irgendwo etwas kaputt
aussieht.
ERKLÄRTE AUSNAHME (Kriterium 16 verlangt, dass sie im Code steht): Die
Lücke des Rasters (.codgw-grid, .codgw-past-grid) bleibt fest. Sie hängt
NICHT an --cod-card-ui-scale, und zwar nicht aus Nachlässigkeit: Die
Skalierung wird aus der gemessenen KARTENBREITE errechnet, und die Breite
der Karte hängt im Raster an der Lücke. Beides aneinanderzuhängen ergibt
eine Schleife, die bei jeder Fenstergrösse neu pendelt. Die Angebote-Kachel
hat die Raster-Lücken aus demselben Grund unangetastet gelassen. */
.codgw-card{
--codgw-rand: calc(16px * var(--cod-card-ui-scale, 1)); /* seitlicher Rand der Quell-Kachel */
--codgw-kopf: calc(18px * var(--cod-card-ui-scale, 1)); /* Innenabstand Karten-Kopf */
--codgw-kopf-u: calc(15px * var(--cod-card-ui-scale, 1)); /* Karten-Kopf unten */
--codgw-inhalt: calc(22px * var(--cod-card-ui-scale, 1)); /* Innenabstand Inhaltsblock */
--codgw-fuss: calc(14px * var(--cod-card-ui-scale, 1)); /* Karten-Fuss, Titel oben */
--codgw-reihe: calc(12px * var(--cod-card-ui-scale, 1)); /* Lücke waagerechter Reihen */
--codgw-zeile: calc(10px * var(--cod-card-ui-scale, 1)); /* Abstand zwischen Textzeilen */
--codgw-tags: calc(7px * var(--cod-card-ui-scale, 1)); /* Lücke zwischen den Chips */
--codgw-eng: calc(6px * var(--cod-card-ui-scale, 1)); /* Symbol zu Text */
--codgw-knopf: calc(8px * var(--cod-card-ui-scale, 1)); /* Symbol zu Text IM Knopf */
--codgw-luft: calc(4px * var(--cod-card-ui-scale, 1)); /* kleinster Abstand */
background:var(--cod-card-bg,#fff);border-radius:var(--codgw-card-radius);overflow:hidden;box-shadow:var(--codgw-shadow-card);border:var(--cod-card-border-width, 1px) solid var(--cod-card-border-color, var(--codgw-border))}
/* Die Karten eines Rasters sind immer gleich hoch (das Raster streckt sie).
Bis zum 07.08.2026 fuellte der Inhalt diese Hoehe aber nicht: Das Bild hatte
eine feste Hoehe, und darunter stand bei Karten ohne eingebettete Kachel
(Kurs, Individuell) bis zur halben Karte weisse Flaeche. Gemessen 365x534
Karte bei 255 px Bild - der Rest war leer.
Die Karte ist deshalb eine Flex-Spalte, und der Inhaltsblock nimmt sich den
Rest. Das Bild behaelt seine Mindesthoehe und waechst nur nach unten weiter;
object-fit sorgt dafuer, dass es dabei nicht verzerrt.
Karten MIT eingebetteter Kachel (Event, Angebot) fuellen ihre Hoehe schon
ueber den Textblock - fuer sie aendert sich dadurch nichts. */
.codgw-card{display:flex;flex-direction:column}
/* Das BILD ist auf allen Kartenarten gleich hoch - gestreckt wird der
Inhalt darunter. Der erste Anlauf machte es umgekehrt und liess das Bild
den Rest nehmen; gemessen standen dann 307 px neben den 256 px der
Event-Kachel, und die Karten sahen nebeneinander verschieden aus.
Das Verhaeltnis 365/256 ist die gemessene Bildflaeche der Event-Kachel
bei 365,3 px Kartenbreite. Wer es aendert, misst vorher beide. */
.codgw-card > .codgw-image{flex:0 0 auto;aspect-ratio:365 / 256}
/* Das Angebots-Bild lief auf aspect-ratio 4/3, alle anderen Rubriken auf 365/256.
Daraus wurden 249 statt 256 px Bildhoehe - und weil die Knopfreihe unten am
Inhalt haengt, sass sie bei Angeboten 7 px hoeher als bei Event und Kurs.
Gemessen: Rahmen 1,467 gegen 1,426. Jetzt ueberall dasselbe Verhaeltnis. */
/* Eine explizite Hoehe schlaegt aspect-ratio - deshalb blieb das Angebots-Bild
trotz gesetztem Verhaeltnis bei 249 px. height:auto gibt dem Verhaeltnis das Wort. */
.codgw-card .angebot-image-wrap{aspect-ratio:365 / 256!important;height:auto!important}
.codgw-card .angebot-image-wrap{position:relative!important;overflow:hidden!important;flex:0 0 auto!important}
.codgw-card .angebot-image-wrap > img,.codgw-card .angebot-image-wrap > picture{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
/* Die Knopfreihe klebt unten. Die drei Rubriken sind verschieden aufgebaut - Event
steckt alles in .cod-row, Angebot in eine Flex-Spalte, die Karte ohne Quelle flach.
Damit die Reihen trotzdem auf einer Linie sitzen, wird jede Ebene zur Spalte und
die Reihe per margin-top:auto nach unten gedrueckt. Gemessen vorher: 14/31/48 px
Abstand vom unteren Kartenrand. */
/* Die Kette muss LUECKENLOS sein: height:100% wirkt nur an einem Elternteil mit
fester Hoehe. Deshalb wird jede Ebene zur Spalte und gibt die Resthoehe weiter -
sonst rechnet sich margin-top:auto zu 0 aus, weil es keinen freien Platz gibt.
Genau das war der Fall: die Regel stand da, der berechnete Wert blieb 0px. */
.codgw-card > .codgw-source-embed{display:flex!important;flex-direction:column!important}
.codgw-card .cod-card{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0}
.codgw-card .cod-card > .cod-row{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0}
.codgw-card .cod-actions,.codgw-card .angebot-actions{margin-top:auto!important}
/* Alle Rubriken enden mit demselben Abstand unter der Knopfreihe. Vorher kam er
aus drei verschiedenen Quellen und ergab 7 px (Angebot), 14 (Event) und 33 (ohne
Quelle) - die Reihen sassen deshalb sichtbar auf verschiedenen Linien, obwohl alle
Knoepfe gleich hoch sind. Jetzt bestimmt EINE Polsterung an der Kachel den Abstand. */
.codgw-card > .codgw-source-embed > .cod-card,.codgw-source-embed > .cod-card.angebot-card{padding-bottom:var(--codgw-fuss,14px)!important}
.codgw-card .cod-actions,.codgw-card .angebot-actions{margin-bottom:0!important}
.codgw-card .cod-card > .cod-row{padding-bottom:0!important}
.codgw-card .cod-bottombar{display:none!important}
/* Zwei beschriftete Knoepfe teilen sich die Zeile zu gleichen Teilen. Mit der
Basis 140px passen sie bei 365 px Karte nebeneinander; reicht der Platz nicht
(schmale Karte, langer Text), bricht die Reihe um und JEDER nimmt dann die
volle Breite - statt dass einer voll und der zweite halb dasteht. */
.codgw-card .cod-actions > .cod-cta,.codgw-card .cod-actions > .cod-event-share-fab{flex:1 1 calc(140px * var(--cod-card-ui-scale, 1))!important}
/* Drei beschriftete Knoepfe passen beim Angebot nicht in eine Zeile - ohne Umbruch
sprengen sie die Karte, und die Selbstheilung der Skalierung zieht sie dauerhaft
kleiner (gemessen 35,8 statt 40,6 px). Mit Umbruch rutscht "Teilen" in die zweite
Zeile, statt alle Masse der Karte zu druecken. */
/* Auch beim Angebot umbrechen DUERFEN - es tritt nur ein, wenn es wirklich nicht
passt. Bei 340 px Karte fehlten dem dritten Knopf 2,3 px; ohne Umbruch schrumpft
die Selbstheilung dafuer die ganze Karte samt Schrift. */
.codgw-card .cod-actions,.codgw-card .angebot-actions{flex-wrap:wrap!important;row-gap:calc(8px * var(--cod-card-ui-scale, 1))!important}
/* Der Sprechblasen-Text der Quelle steckt IM Knopf und macht ihn breiter. Jetzt
steht das Wort sichtbar daneben - die Blase ist damit ueberfluessig. */
.codgw-card .angebot-share-fab .partner-loc-tooltip,.codgw-card .cod-event-share-fab .partner-loc-tooltip{display:none!important}
/* Der Teilen-Knopf traegt jetzt das Wort "Teilen" und verhaelt sich wie die
Knoepfe daneben: gleiche Hoehe, gleicher Radius, gleiche Schrift, und er
teilt sich die Breite mit ihnen statt als Quadrat danebenzustehen. */
.codgw-card .cod-actions .cod-event-share-fab,.codgw-card .angebot-actions .cod-event-share-fab{width:auto!important;flex:1 1 0!important;min-width:0!important;gap:calc(8px * var(--cod-card-ui-scale, 1))!important;padding:0 calc(12px * var(--cod-card-ui-scale, 1))!important}
.codgw-share-text{font-size:max(var(--cod-card-min-font, 13px), calc(var(--cod-gws-cta-size, 16px) * var(--cod-card-ui-scale, 1)));font-weight:700;line-height:1.2;white-space:nowrap}
/* Das Symbol schrumpft nicht und bleibt links vom Wort. */
.codgw-card .cod-event-share-fab::before,.codgw-card .angebot-share-fab::before{flex:0 0 auto!important}
/* Drei Knoepfe nebeneinander waren zusammen rund 11 px breiter als die Karte innen.
Die Selbstheilung in cod-partner-card-scale.js zieht dann die GANZE Karte einen
Schritt kleiner (1,015 auf 0,975) - deshalb waren beim Angebot alle Masse vier
Prozent kleiner als in den anderen Rubriken, obwohl die Karte gleich breit ist.
Mit min-width:0 duerfen die Textknoepfe wirklich schrumpfen, und die Karte bleibt. */
.codgw-card .angebot-actions .cod-cta{min-width:0!important}
.codgw-card .angebot-actions .cod-cta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Teilen-Knopf der Angebots-Reihe stand auf flex:0 1 auto und wurde neben zwei
Textknoepfen auf 26 statt 41 px gequetscht. In den anderen Rubriken steht er auf
0 0 auto - deshalb fiel es nur beim Angebot auf. Und die Angebots-Reihe hatte als
einzige keinen Vorabstand, war also 41 statt 43 px hoch. */
.codgw-card .angebot-actions .angebot-share-fab,.codgw-card .cod-actions .angebot-share-fab{flex:0 0 auto!important}
.codgw-card .angebot-actions{padding-top:calc(2px * var(--cod-card-ui-scale, 1))!important}
/* Freien Platz TEILEN statt ihn ganz vor der Knopfreihe zu sammeln: Zwei auto-Margen
in derselben Flex-Spalte bekommen je die Haelfte. Bei einem einzeiligen Titel sass
der Text sonst oben angeklebt und unten klaffte alles auf einmal. */
.codgw-card .cod-card > .cod-row > .cod-title,.codgw-card .cod-card > .cod-title{margin-bottom:auto!important}
/* Der Textblock sass schief: 10 px unter dem Titel, aber NULL zwischen Text und
Knopfreihe - der Text klebte am Knopf, waehrend oben Luft war. Jetzt oben
weniger, unten ein echter Abstand, damit der Block ruhig steht. */
.codgw-card .cod-card .cod-title{margin-bottom:var(--codgw-luft,4px)!important}
.codgw-card .codgw-manual-text,.codgw-card .angebot-location-meta,.codgw-card .cod-info-line{margin-bottom:var(--codgw-reihe,12px)!important}
/* Namensschild des Erstellers - Masse vom Angebots-Chip abgenommen:
Pille 999px, rgba(0,0,0,.55) mit 4px Weichzeichner, 16 px von Rand und Boden,
Bild 32x32 RUND wie die Pille drumherum (am 10.08.2026 ausdruecklich so
Vorbild-CSS sagt zwar 50%, gemessen sind es 0, und so soll es bleiben.
Alle Masse skalieren mit der Karte, sonst wandert das Schild bei schmalen Karten. */
.codgw-image{position:relative}
/* Der Titel stand in drei Groessen nebeneinander: Event 20,3 - Kurs 18,27 -
Angebot 18 px (unskaliert). Eine Rolle fuer alle, und sie wandert mit der Karte.
Ebenso Ort und Entfernung des Angebots, die als einzige fest standen. */
.codgw-card .cod-card .cod-title,.codgw-card .cod-card h3.cod-title,.codgw-card .angebot-card .cod-title{font-size:max(var(--cod-card-min-font, 13px), calc(var(--cod-gws-titel-size, 18px) * var(--cod-card-ui-scale, 1)))!important}
/* Dieselbe Grösse wie die Event-Meta-Zeile (12.08.2026). Gemessen standen in
derselben Zeile 15,70 px beim Event ("TEST Ort …", "18 Aug 13:37") gegen
13,73 px beim Angebot ("Bregenz, Vorarlberg, AT", "flexibel") - zwei Karten
nebeneinander, gleiche Art von Angabe, verschieden gross. Der Wert kommt aus
derselben Rechnung wie .codgw-line-text weiter unten; wer eine ändert, zieht
die andere mit. */
.codgw-card .angebot-location-name,.codgw-card .angebot-distance-line,.codgw-card .angebot-distance-value{font-size:max(var(--cod-card-min-font, 13px), calc(16px * var(--cod-card-ui-scale, 1)))!important;font-family:inherit!important;color:var(--cod-color-text,#4d4d4d)!important}
/* Der runde Creator-Badge der Event-Kachel entfaellt - das Namensschild unten
links tritt an seine Stelle, damit alle Rubriken dieselbe Angabe an derselben
Stelle zeigen. */
.codgw-card .codgw-event-media-frame .cod-badge,.codgw-card .cod-media .cod-badge{display:none!important}
.codgw-card .codgw-event-media-frame,.codgw-card .cod-media,.codgw-card .angebot-image-wrap{position:relative}
.codgw-creator-chip{position:absolute;left:var(--codgw-rand,16px);bottom:var(--codgw-rand,16px);display:inline-flex!important;align-items:center!important;height:auto!important;width:auto!important;gap:calc(8px * var(--cod-card-ui-scale, 1))!important;padding:0 calc(10px * var(--cod-card-ui-scale, 1)) 0 0;border-radius:999px;background:var(--cod-gws-creator-bg, rgba(0,0,0,.55));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--cod-text-on-dark,#fff);font-size:max(var(--cod-card-min-font, 13px), calc(13px * var(--cod-card-ui-scale, 1)));line-height:1.2;text-decoration:none;box-shadow:var(--cod-shadow-action);z-index:3;max-width:calc(100% - 2 * var(--codgw-rand,16px))}
/* Mit !important und Kartenbezug: Die allgemeinen Bildregeln des Bildbereichs
(.codgw-image img{width:100%;height:220px}) greifen sonst auf das Chip-Bild
durch - gemessen 323x323 statt 32x32, das Schild war so gross wie das Bild. */
.codgw-card .codgw-creator-chip img,.codgw-creator-chip img{width:calc(32px * var(--cod-card-ui-scale, 1))!important;height:calc(32px * var(--cod-card-ui-scale, 1))!important;border-radius:999px!important;object-fit:cover!important;border:2px solid rgba(255,255,255,.9)!important;flex:0 0 auto!important;display:block!important;max-width:none!important;position:static!important;inset:auto!important}
.codgw-creator-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Laeuft der Inhalt einer Quelle laenger als die Kachel hoch ist, ragte er bisher in
die Fusspolsterung hinein und die Knopfreihe sass 7 statt 14 px ueber dem Rand.
Gemessen: 464 px Inhalt in einer 457er Kachel. Der Textbereich darf deshalb
schrumpfen - er ist ohnehin auf zwei Zeilen begrenzt. */
.codgw-card .angebot-content,.codgw-card .cod-card > .cod-row{min-height:0!important;overflow:hidden!important}
/* In der Reihe ist der Knopf kein absolut gesetztes Anhaengsel des Bildes mehr. */
.codgw-card .angebot-actions .angebot-share-fab{position:static!important;inset:auto!important;margin:0!important}
.codgw-card > .codgw-source-embed{flex:1 1 auto;min-height:0}
.codgw-card > .codgw-content{flex:0 0 auto}
.codgw-card > .codgw-content--text{padding-top:0}
/* Seitlicher Rand wie Titel und Zeile darueber - gemessen fluchten die auf
16 px, der Absatz stand bei 0 und sprang dadurch nach links heraus. */
/* Auf drei Zeilen geklemmt: Sonst bestimmt die Laenge der Beschreibung die
Hoehe der ganzen Kartenreihe, und eine lange Beschreibung macht alle
Karten daneben hoeher. Der volle Text steht im Beschreibungs-Popup. */
.codgw-manual-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 var(--codgw-rand,16px);font-size:max(var(--cod-card-min-font, 13px), calc(16px * var(--cod-card-ui-scale, 1)));line-height:1.45;color:var(--cod-color-text,#4d4d4d)}
.codgw-card > .codgw-image img{height:100%!important;object-fit:cover}
.codgw-image{position:relative;overflow:hidden}
.codgw-image img{width:100%;height:220px;object-fit:cover;display:block}
.codgw-image-slider{height:220px}
.codgw-image-slider .codgw-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.codgw-image-slider .codgw-slide.is-active{opacity:1}
/* Sponsor-Badge: seit 06.08.2026 auf dem gemeinsamen Info-Chip (Etappe 7).
Hier bleibt nur, was NICHT der Baustein ist - die Lage im Bild, der
Weichzeichner und die Stapelhoehe. Form, Farbe, Innenabstand und das runde
Bild kommen jetzt aus .cod-info-chip--bild--medien und folgen damit dem
Betreiber-Dashboard.
Vorher stand der Grund hier HART auf rgba(0,0,0,.55) - der Badge folgte dem
Dashboard also gar nicht, obwohl der Anbieter-Chip der Angebote es laengst
tat. Genau solche Alleingaenge loest der gemeinsame Baustein auf. */
.codgw-sponsor-badge{position:absolute;left:16px;bottom:16px;text-decoration:none;z-index:4;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.codgw-content{padding:var(--codgw-inhalt,22px)}
.codgw-content--compact{padding:var(--codgw-rand,16px) var(--codgw-kopf,18px) var(--codgw-kopf,18px)}
/* ── Formular / Modal ────────────────────────────────────────────────────── */
.codgw-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.codgw-form input{border:1px solid var(--codgw-border);border-radius:calc(var(--codgw-button-radius) + 6px);padding:13px 14px;width:100%;box-sizing:border-box;color:var(--codgw-text);background:var(--cod-card-bg,#fff)}
.codgw-form input:focus{outline:none;border-color:var(--cod-cta,#2b86c5);box-shadow:var(--codgw-shadow-focus)}
.codgw-public{display:block;margin:12px 0;font-size:14px;line-height:1.45;color:var(--codgw-text)}
.codgw-public input{accent-color:var(--codgw-accent,#2563eb)}
.codgw-terms{margin:12px 0}
.codgw-terms summary{cursor:pointer;font-weight:700;color:var(--codgw-title)!important}
.codgw-form button,.codgw-share,.codgw-open-modal{border:0;border-radius:var(--codgw-button-radius);background:var(--codgw-accent,#2563eb);color:var(--cod-text-on-dark,#fff);padding:12px 16px;font-weight:700;cursor:pointer;box-shadow:var(--codgw-shadow-action);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.codgw-share{margin-top:10px;background:var(--codgw-title)}
.codgw-info{background:var(--codgw-soft);border-radius:calc(var(--codgw-button-radius) + 6px);padding:12px;color:var(--codgw-title)!important}
/* ── Karten-Kopf (Top-Bereich) ───────────────────────────────────────────── */
.codgw-giveaway-top{position:relative;padding:var(--codgw-kopf,18px) var(--codgw-kopf,18px) var(--codgw-kopf-u,15px) var(--codgw-kopf,18px);background:linear-gradient(135deg,var(--codgw-soft),var(--cod-card-bg,#ffffff) 60%,var(--codgw-green-08));display:flex;flex-direction:column;gap:var(--codgw-eng,6px);min-height:auto}
.codgw-giveaway-top-main{display:flex;align-items:center;justify-content:space-between;gap:var(--codgw-reihe,12px)}
.codgw-giveaway-headcol{display:flex;flex-direction:column;gap:var(--codgw-eng,6px);min-width:0;flex:1 1 auto}
.codgw-giveaway-tags{display:flex;align-items:center;gap:var(--codgw-tags,7px);flex-wrap:nowrap;min-width:0}
.codgw-giveaway-label,.codgw-giveaway-category{display:inline-flex;align-items:center;border-radius:var(--cod-chip-radius, var(--codgw-pill-radius));padding:calc(var(--cod-chip-pad-y, 5px) * var(--cod-card-ui-scale, 1)) calc(var(--cod-chip-pad-x, 11px) * var(--cod-card-ui-scale, 1));font-size:max(var(--cod-card-min-font, 13px), calc(12px * var(--cod-card-ui-scale, 1)));font-weight:700;line-height:1}
.codgw-giveaway-label{background:var(--cod-chip-surface-bg, #eef6ff);color:var(--cod-chip-surface-color, #2b86c5);border:var(--cod-chip-surface-border-width, 1px) solid var(--cod-chip-surface-border-color, transparent)}
.codgw-giveaway-category{background:var(--cod-chip-surface-bg, #eef6ff);color:var(--cod-chip-surface-color, #2b86c5);box-shadow:inset 0 0 0 var(--cod-chip-surface-border-width, 1px) var(--cod-chip-surface-border-color, transparent)}
/* Der Teilnehmen-Knopf hat eine EIGENE Rahmen-Rolle und standardmässig keinen
Rahmen (12.08.2026). Vorher hing er an --cod-btn-angebot-border-*, und die
steht auf 2 px in #3598DB. Bei den blau gefüllten Knöpfen fällt ein blauer
Rahmen nicht auf - auf dem gelben Teilnehmen-Knopf schon, und dort wirkt er
wie ein Fehler. Ein gefüllter Knopf braucht ohnehin keine Umrandung.
Die eigene Rolle bleibt trotzdem: So lässt sich später einer setzen, ohne
die Angebots-Knöpfe mitzuziehen. */
.codgw-giveaway-btn{align-self:center;flex:0 0 auto;margin:0;border:var(--cod-gws-teilnehmen-border-width, 0) solid var(--cod-gws-teilnehmen-border-color, transparent)!important;border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px))!important;background:var(--cod-gws-teilnehmen-bg, var(--cod-color-star,#FFCD02))!important;color:var(--cod-gws-teilnehmen-color, var(--codgw-title,#1f4166))!important;height:calc(var(--cod-btn-angebot-height, 40px) * var(--cod-card-ui-scale, 1))!important;min-height:calc(var(--cod-btn-angebot-height, 40px) * var(--cod-card-ui-scale, 1))!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 calc(16px * var(--cod-card-ui-scale, 1))!important;font-weight:var(--cod-font-btn-angebot-weight, 700)!important;cursor:pointer!important;font-size:max(var(--cod-card-min-font, 13px), calc(var(--cod-font-btn-angebot-size, 14px) * var(--cod-card-ui-scale, 1)))!important;line-height:1.2!important;box-shadow:var(--codgw-shadow-action);white-space:nowrap}
.codgw-giveaway-date{font-size:max(var(--cod-card-min-font, 13px), calc(14px * var(--cod-card-ui-scale, 1)));line-height:1.35;font-weight:700}
.codgw-card .codgw-giveaway-top .codgw-giveaway-date{color:var(--cod-meta,#5a7a99)!important}
.codgw-giveaway-title{display:none!important}
.codgw-giveaway-prize-title{font-size:max(var(--cod-card-min-font, 13px), calc(18px * var(--cod-card-ui-scale, 1)))!important;line-height:1.2!important;font-weight:700!important;margin:0!important;font-family:var(--e-global-typography-dbdb71b-font-family,inherit);white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
.codgw-card .codgw-giveaway-top .codgw-giveaway-prize-title{color:var(--cod-title-color,#1f4166)!important}
.codgw-giveaway-extra{font-size:14px;line-height:1.4;font-weight:600;color:var(--cod-color-text,#4d4d4d)!important;min-height:19px;margin-top:0}
.codgw-giveaway-prize{display:none!important}
.codgw-giveaway-subtitle{display:none!important}
.codgw-giveaway-meta{display:none!important}
.codgw-giveaway-meta span{display:none!important}
/* ── Karten-Hover/Animationen ────────────────────────────────────────────── */
.codgw-card{position:relative;isolation:isolate;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
/* Schatten beim Zeigen (Kriterium 7). Gemessen am 07.08.2026 bei 1440 px:
Ruhe und Zeigen lieferten beide 0 6px 20px bei 18 Prozent - die Karte gab
also gar keine Rückmeldung. Der Blendübergang darüber war längst
vorbereitet, und --codgw-shadow-hover stand seit jeher im Kopf der Datei;
gelesen hat ihn nur niemand.
Genau dieselbe Lücke hatte die Events-Karte bis zum 02.08.2026. Die Karte
bewegt sich dabei NICHT - der "Hover-Versatz"-Regler ist am 04.08.2026 aus
allen Widgets entfernt worden, weil er Kriterium 7 widerspricht. */
.codgw-card:hover,.codgw-card:focus-within{box-shadow:var(--cod-shadow-card-hover,var(--codgw-shadow-hover))}
.codgw-card .codgw-image img,.codgw-card .codgw-source-embed img{transition:transform .45s ease,filter .45s ease}
.codgw-grid>.codgw-card,.codgw-draw-list>.codgw-card{animation:codgwFadeUp .6s ease both}
.codgw-grid>.codgw-card:nth-child(2),.codgw-draw-list>.codgw-card:nth-child(2){animation-delay:.06s}
.codgw-grid>.codgw-card:nth-child(3),.codgw-draw-list>.codgw-card:nth-child(3){animation-delay:.12s}
.codgw-grid>.codgw-card:nth-child(4),.codgw-draw-list>.codgw-card:nth-child(4){animation-delay:.18s}
/* ── Draw-Banner (Auslosungs-Widget, [cod_gewinnspiel_auslosung]) ─────────── */
.codgw-draw-wrap{display:grid;gap:48px}
.codgw-draw-root + .codgw-wrap{margin-top:40px}
/* Umschalter "X aktive Gewinnspiele" / "Y vergangene Gewinnspiele" (23.08.2026,
Zwilling der Zentrale): steht zwischen Banner und Karten-Grid. Selbes
Knopf-Paar-Muster wie .cec-tab im Creator-Hub (is-active + aria-pressed),
hier mit den lokalen codgw- und cod-Token statt hartkodierter Farben.
Abstand oben größer als unten (23.08.2026): So gehört der Umschalter
sichtbar zum Karten-Grid darunter statt am Banner zu kleben. Der
Ruhezustand bekommt einen sichtbaren Rahmen und einen leichten Farbton
(--codgw-soft) statt reinem Weiß auf Weiß - vorher war "nicht aktiv"
von der Seite kaum zu unterscheiden. Hover/Active folgen dem
Hausstandard aus .angebote-tab (header.css): Anheben + Aufhellen beim
Zeigen, Eindrücken beim Antippen; 44 px Mindesthöhe für die
Trefferfläche.
Hover/Focus mit EIGENER Hintergrundfarbe, nicht nur Transform/Schatten
(gemessen am 23.08.2026): Das Hello-Elementor-Theme setzt in reset.css
`[type=button]:hover,[type=button]:focus,button:hover,button:focus{
background-color:#c36;color:#fff}` mit Spezifität (0,0,2,0) - ohne
eigene Deklaration hier faerbt sich JEDER Knopf beim Zeigen oder
Fokussieren in dieses Theme-Pink um, aktiv wie inaktiv nicht mehr zu
unterscheiden. Der Eltern-Wrapper `.codgw-view-toggle` hebt die eigene
Spezifitaet auf (0,0,3,0) bzw. (0,0,4,0) an und gewinnt damit sicher,
unabhaengig von der Ladereihenfolge der Stylesheets (Spezifitaet statt
Reihenfolge - siehe cod-subrow.css-Lehre). */
.codgw-view-toggle{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:32px 0 18px}
.codgw-view-toggle-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;background:var(--codgw-soft,#eef6ff);color:var(--codgw-title,#1f4166);border:1px solid var(--codgw-border-hover,rgba(53,152,219,.18));border-radius:var(--codgw-pill-radius,999px);padding:10px 20px;font-weight:700;font-size:14px;line-height:1.2;cursor:pointer;box-shadow:0 2px 10px rgba(31,65,102,.06);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background .2s ease,color .2s ease,border-color .2s ease;font-family:inherit}
.codgw-view-toggle-btn.is-active{background:var(--cod-color-accent-blue,#3598DB);color:var(--cod-text-on-dark,#fff);border-color:var(--cod-color-accent-blue,#3598DB)}
@media (hover:hover){
.codgw-view-toggle .codgw-view-toggle-btn:hover,.codgw-view-toggle .codgw-view-toggle-btn:focus-visible{background:var(--codgw-soft,#eef6ff);color:var(--codgw-title,#1f4166);border-color:var(--codgw-border-hover,rgba(53,152,219,.18));transform:translateY(-1px);box-shadow:0 8px 20px rgba(31,65,102,.14);filter:brightness(1.05)}
.codgw-view-toggle .codgw-view-toggle-btn.is-active:hover,.codgw-view-toggle .codgw-view-toggle-btn.is-active:focus-visible{background:var(--cod-color-accent-blue,#3598DB);color:var(--cod-text-on-dark,#fff);border-color:var(--cod-color-accent-blue,#3598DB)}
}
.codgw-view-toggle-btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.codgw-view-toggle-btn{transition:none!important}.codgw-view-toggle-btn:hover,.codgw-view-toggle-btn:focus-visible,.codgw-view-toggle-btn:active{transform:none!important}}
/* .codgw-wrap und .codgw-past tragen beide display:block als Vorgabe - ohne
diese Zeile schlägt dieser Wert das hidden-Attribut, mit dem der Umschalter
zwischen ihnen wechselt. */
.codgw-wrap[hidden],.codgw-past[hidden]{display:none!important}
/* Vergangene Gewinnspiele: nachladbares Grid, Umschalten übernimmt der Toggle oben */
.codgw-past{margin-top:40px;text-align:center}
.codgw-past-toggle,.codgw-past-more{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cod-card-bg,#fff);color:var(--codgw-title,#1f4166);border:1px solid var(--codgw-border);border-radius:var(--codgw-button-radius,12px);padding:12px 22px;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;box-shadow:0 2px 10px rgba(31,65,102,.08);transition:box-shadow .2s ease,transform .2s ease;font-family:inherit}
.codgw-past-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;text-align:left}
.codgw-past-grid:not(:empty){margin-top:24px}
.codgw-past-more{margin-top:22px}
/* Das hidden-Attribut ist nur display:none aus dem UA-Stylesheet - jede eigene
display-Angabe schlaegt es. Der Knopf trug hidden=true und blieb sichtbar:
"Mehr anzeigen" stand da, obwohl es nichts mehr nachzuladen gab. */
.codgw-past-toggle[hidden],.codgw-past-more[hidden]{display:none!important}
.codgw-past-grid .codgw-giveaway-btn{display:none!important}
/* "Gewinner"-Button (ersetzt "Teilnehmen" in vergangenen Karten) + Gewinner-Popup */
/* Der Gewinner-Knopf steht an DERSELBEN Stelle wie "Teilnehmen" - er ersetzt
ihn auf abgeschlossenen Karten. Bis zum 07.08.2026 folgte er trotzdem
weder dessen Höhe noch dessen Rundung: gemessen 95 x 43 px mit Radius 10,
während der Knopf daneben 40,6 px hoch war und Radius 8 trug. Ursache
waren eine senkrechte Polsterung (13 px) statt einer festen Höhe und eine
eigene Rundungs-Kette (--codgw-button-radius statt der Knopf-Rolle).
Beides ist jetzt wortgleich mit .codgw-giveaway-btn - wer eines ändert,
ändert beide gemeinsam. Die Farbe bleibt bewusst eigen
(--cod-color-star): Ein abgeschlossenes Gewinnspiel soll sich vom
laufenden unterscheiden. */
.codgw-winners-btn{align-self:center;flex:0 0 auto;margin:0;border:0;border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px));background:var(--cod-color-accent-blue, var(--cod-color-pink, #fb4c95));color:var(--cod-text-on-dark,#fff);height:calc(var(--cod-btn-angebot-height, 40px) * var(--cod-card-ui-scale, 1));min-height:calc(var(--cod-btn-angebot-height, 40px) * var(--cod-card-ui-scale, 1));display:inline-flex;align-items:center;justify-content:center;padding:0 var(--codgw-kopf,18px);font-weight:800;cursor:pointer;font-size:max(var(--cod-card-min-font, 13px), calc(14px * var(--cod-card-ui-scale, 1)));line-height:1.2;box-shadow:var(--codgw-shadow-action);white-space:nowrap;font-family:inherit}
.codgw-winners-modal .codgw-modal-panel{max-width:460px}
.codgw-winners-body{margin-top:4px}
.codgw-winners-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.codgw-winner{display:flex;align-items:baseline;gap:10px;padding:12px 14px;border-radius:12px;background:var(--codgw-soft,#eef6ff)}
.codgw-winner::before{content:"\2605";color:var(--cod-color-star,#FFCD02);font-size:16px;line-height:1;flex:0 0 auto}
.codgw-winner-name{font-weight:800;color:var(--codgw-title,#1f4166);font-size:16px}
.codgw-winner-date{margin-left:auto;color:var(--cod-meta,#5a7a99);font-size:13px;white-space:nowrap}
.codgw-winners-empty,.codgw-winners-loading{color:var(--cod-meta,#5a7a99);text-align:center;padding:14px 0;margin:0}
@media(max-width:1024px){.codgw-past-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.codgw-past-grid{grid-template-columns:1fr}}
.codgw-next-draw{position:relative;padding:clamp(30px,4.6vw,54px);border-radius:calc(var(--codgw-card-radius) * 2);overflow:hidden;color:var(--cod-color-text,#4d4d4d);background:radial-gradient(circle at 12% 14%,var(--codgw-mix-white-24,rgba(255,255,255,.24)),transparent 22%),radial-gradient(circle at 85% 16%,var(--codgw-mix-green-22,rgba(81,179,111,.22)),transparent 20%),radial-gradient(circle at 50% 100%,var(--codgw-mix-white-14,rgba(255,255,255,.14)),transparent 32%),linear-gradient(180deg,var(--codgw-hero-veil,rgba(255,255,255,.74)),var(--codgw-hero-veil,rgba(255,255,255,.74))),linear-gradient(140deg,var(--codgw-hero-from) 0%,var(--codgw-hero-to) 100%);border:1px solid var(--codgw-mix-white-18,rgba(255,255,255,.18));box-shadow:var(--codgw-shadow-next);text-align:left;isolation:isolate}
.codgw-next-draw:before,.codgw-next-draw:after{content:"";position:absolute;border-radius:50%;pointer-events:none;opacity:.78;animation:codgwFloat 16s ease-in-out infinite}
.codgw-next-draw:before{width:280px;height:280px;left:-72px;top:-96px;background:radial-gradient(circle,var(--codgw-mix-white-32,rgba(255,255,255,.32)) 0%,var(--codgw-mix-white-08,rgba(255,255,255,.08)) 45%,transparent 72%);filter:blur(8px)}
.codgw-next-draw:after{width:320px;height:320px;right:-90px;bottom:-150px;background:radial-gradient(circle,var(--codgw-green-26) 0%,var(--codgw-green-08) 48%,transparent 76%);filter:blur(12px);animation-delay:-6s}
.codgw-next-draw>*{position:relative;z-index:1}
.codgw-next-draw-shell{display:grid;gap:30px;align-items:start}
.codgw-next-draw-intro{display:grid;gap:14px;justify-items:center;text-align:center;max-width:920px;margin:0 auto}
.codgw-next-eyebrow{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:0;background:transparent;border:none;box-shadow:none;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-family:var(--cod-gws-banner-eyebrow-font,inherit)!important;font-size:var(--cod-gws-banner-eyebrow-size,inherit)!important}
.codgw-next-draw .codgw-next-eyebrow{color:var(--codgw-hero-eyebrow)!important}
.codgw-next-kicker{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;padding:10px 18px;border-radius:var(--codgw-pill-radius);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(135deg,var(--codgw-mix-white-18,rgba(255,255,255,.18)),var(--codgw-mix-white-08,rgba(255,255,255,.08)));border:1px solid var(--codgw-mix-white-20,rgba(255,255,255,.2));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--codgw-shadow-kicker);font-family:var(--cod-gws-banner-kicker-font,inherit)!important;font-size:var(--cod-gws-banner-kicker-size,12px)!important}
.codgw-next-kicker{color:var(--codgw-hero-kicker)!important}
.codgw-next-draw .codgw-next-draw-title{margin:0;font-size:clamp(2.5rem,5.4vw,4.9rem);line-height:.98;font-weight:900;color:var(--codgw-hero-title)!important;text-shadow:var(--codgw-shadow-title);max-width:100%;font-family:var(--cod-gws-banner-title-font,inherit)!important;font-size:var(--cod-gws-banner-title-size,clamp(2.5rem,5.4vw,4.9rem))!important}
.codgw-next-draw-copy,.codgw-next-draw p.codgw-next-draw-copy{margin:0;max-width:760px;font-size:clamp(1rem,1.45vw,1.18rem);line-height:1.72;color:var(--codgw-hero-copy)!important;font-family:var(--cod-gws-banner-copy-font,inherit)!important;font-size:var(--cod-gws-banner-copy-size,clamp(1rem,1.45vw,1.18rem))!important}
.codgw-next-draw-copy:empty{display:none!important}
.codgw-next-draw h1,.codgw-next-draw h2,.codgw-next-draw h3,.codgw-next-draw h4,.codgw-next-draw p{color:inherit!important}
.codgw-next-draw[data-codgw-draw-banner] .codgw-next-draw-shell>.codgw-next-draw-copy,.codgw-next-draw[data-codgw-draw-banner] .codgw-next-draw-shell>.codgw-next-stage--empty{display:none!important}
.codgw-next-stage{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:24px;align-items:stretch}
.codgw-next-stage--empty{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto}
.codgw-countdown-card,.codgw-draw-winners-box{position:relative;padding:26px;border-radius:calc(var(--codgw-card-radius) * 1.55);border:1px solid var(--codgw-kachel-rand,rgba(31,65,102,.12));background:var(--codgw-kachel-bg,rgba(255,255,255,.62));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--codgw-shadow-countdown)}
.codgw-countdown-card{display:grid;gap:16px;align-content:center;min-height:100%;overflow:hidden}
.codgw-countdown-card:before,.codgw-draw-winners-box:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--codgw-mix-white-14,rgba(255,255,255,.14)),transparent 48%);pointer-events:none}
.codgw-countdown-card:after{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--codgw-mix-white-16,rgba(255,255,255,.16)),transparent 66%);pointer-events:none}
.codgw-countdown-card--empty{justify-items:center;text-align:center}
.codgw-countdown-label{margin:0;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--codgw-countdown-label-color);font-family:var(--cod-gws-banner-countdown-label-font,inherit)!important;font-size:var(--cod-gws-banner-countdown-label-size,11px)!important}
.codgw-countdown-name{display:-webkit-box;max-width:100%;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;text-overflow:ellipsis}
.codgw-countdown{font-size:clamp(2.8rem,6vw,5.4rem);font-weight:900;line-height:.95;letter-spacing:-.03em;color:var(--codgw-countdown-value-color)!important;text-shadow:var(--codgw-shadow-ctext);animation:codgwGlow 4.8s ease-in-out infinite;font-family:var(--cod-gws-banner-countdown-value-font,inherit)!important;font-size:var(--cod-gws-banner-countdown-value-size,clamp(2.8rem,6vw,5.4rem))!important}
.codgw-countdown--empty{font-size:clamp(2.2rem,4.8vw,3.6rem)}
.codgw-draw-meta{display:none}
.codgw-draw-meta-list{display:flex;flex-wrap:wrap;gap:14px}
/* Grid-Items haben min-width:auto - ein langer Gewinnspielname kann dadurch
nicht umbrechen und sprengt die Karte. Bei 360 px ragten Label, Name und
die Info-Pillen (426,7 px in einer 294 px breiten Karte) heraus und wurden
von overflow:hidden abgeschnitten: "TEST KURS-QUELLE (DESIG...". */
.codgw-countdown-card>*,.codgw-draw-winners-box>*{min-width:0}
.codgw-countdown-label,.codgw-countdown-name,.codgw-draw-meta-pill em{overflow-wrap:anywhere}
.codgw-draw-participants{margin:8px 0 0;list-style:none;padding:0}
.codgw-draw-participants li{white-space:nowrap;padding:6px 12px;border-radius:14px;background:var(--codgw-kachel-tief,rgba(31,65,102,.07));border:1px solid var(--codgw-kachel-rand,rgba(31,65,102,.12));font-size:max(13px,var(--cod-card-min-font,13px));font-weight:700;color:var(--codgw-meta-value-color)}
.codgw-draw-meta-pill{display:grid;gap:5px;min-width:170px;padding:13px 15px;border-radius:18px;background:var(--codgw-kachel-tief,rgba(31,65,102,.07));border:1px solid var(--codgw-kachel-rand,rgba(31,65,102,.12));box-shadow:inset 0 1px 0 var(--codgw-mix-white-08,rgba(255,255,255,.08))}
.codgw-draw-meta-pill strong{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--codgw-meta-label-color);font-family:var(--cod-gws-banner-info-label-font,inherit)!important;font-size:var(--cod-gws-banner-info-label-size,10px)!important}
.codgw-draw-meta-pill em{font-style:normal;font-size:15px;line-height:1.45;font-weight:800;color:var(--codgw-meta-value-color);font-family:var(--cod-gws-banner-info-value-font,inherit)!important;font-size:var(--cod-gws-banner-info-value-size,15px)!important}
/* Teilnehmer-Pill (18.08.2026): "6 Teilnehmer" in EINER Zeile statt Label und Zahl gestapelt. flex:1 (22.08.2026): Seit die Namen als Zeile 2 IN dieser Pille stehen, braucht sie den Platz, den die Auslosung-Pille daneben uebrig laesst.
MUSS NACH .codgw-draw-meta-pill STEHEN (23.08.2026 als Ursache gemessen): Bei gleicher Spezifitaet gewinnt die spaetere Regel - stand dieser Block VOR der Basisregel, hebelte display:grid (samt min-width:170px, font-size:10px) ihn komplett aus. Die Pille wuchs dadurch auf 806px statt sich an ihre 282px breite Elternreihe zu halten (CSS Grid sizt eine implizite Spalte ohne Breitenvorgabe auf den max-content ihres breitesten Kindes), und die Blaetter-Pfeile der Teilnehmer-Reihe hatten dadurch nie etwas zum Blaettern. */
/* max-width:100% zusätzlich zu min-width:0 (23.08.2026, Zwilling der Zentrale):
.codgw-draw-meta-list ist ein Flex-Container mit flex-direction:column und
flex-wrap:wrap - ohne Höhenbegrenzung landen beide Pillen in EINER Flex-Line,
deren Querachsen-Breite sich aus dem größten hypothetischen Kind (dem
max-content der Namensliste) berechnet, BEVOR gestreckt wird. align-items
(normal=stretch) streckt danach beide Pillen auf diese aufgeblähte Breite.
max-width:100% deckelt die hypothetische Breite der Pille selbst. */
.codgw-draw-meta-pill--teilnehmer{display:block;min-width:0;max-width:100%;flex:1 1 220px}
/* Pfeile weiter nach außen (23.08.2026, Zwilling der Zentrale): Die Position
steht im geteilten cod-subrow.js FEST als "right:1px"/"left:1px" inline -
nur ein !important kommt dagegen an, und geändert wird das hier lokal,
nicht im geteilten JS (sonst wandert jede Reihe der Plattform mit). Die
Pille hat 15px Innenabstand, genug Luft für die Pfeile am Rand. */
.codgw-draw-meta-pill--teilnehmer [data-cod-subnav-arrow="right"]{right:-7px!important}
.codgw-draw-meta-pill--teilnehmer [data-cod-subnav-arrow="left"]{left:-7px!important}
.codgw-draw-meta-pill--teilnehmer strong{font-size:max(14px,var(--cod-card-min-font,14px));font-weight:800;letter-spacing:normal;text-transform:none;color:var(--codgw-meta-value-color)}
.codgw-next-panels{display:grid;gap:20px}
.codgw-draw-winners-box{display:grid;gap:12px;align-content:start;min-height:190px;background:linear-gradient(180deg,var(--codgw-mix-ink-20,rgba(31,65,102,.2)),var(--codgw-mix-white-05,rgba(255,255,255,.05)))}
.codgw-draw-winners-title{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--codgw-winners-label-color);font-family:var(--cod-gws-banner-winners-label-font,inherit)!important;font-size:var(--cod-gws-banner-winners-label-size,11px)!important}
.codgw-draw-winners-in{white-space:nowrap}
/* ── Gewinner- und Teilnehmerliste im Banner (18.08.2026) ──────────────────
Die Kachel war vor UND nach der Ziehung leer (127-135 px Leerflaeche auf
allen Breiten), weil das fuellende JS auf Stufe B nie lief. Sie zeigt jetzt
vor der Ziehung die Teilnehmer und danach die Gewinner. */
.codgw-draw-winners-list[data-codgw-label]:before{content:attr(data-codgw-label);flex:0 0 100%;font-size:max(14px,var(--cod-card-min-font,14px));font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--codgw-meta-label-color);margin-bottom:2px}
.codgw-draw-winners-list li.codgw-draw-winner-eintrag{font-weight:800;background:var(--codgw-kachel-rand,rgba(31,65,102,.14))}
.codgw-draw-winner-eintrag--vorschau{background:var(--codgw-kachel-tief,rgba(31,65,102,.07));border-style:dashed;font-weight:700}
@keyframes codgwVorschauEin{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.codgw-draw-winner-eintrag--vorschau{animation:codgwVorschauEin .3s ease}
.codgw-draw-winner-nr{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;background:var(--codgw-kachel-rand,rgba(31,65,102,.12));font-size:11px;font-weight:900}
.codgw-draw-winners-list li.codgw-draw-winners-leer{flex:0 0 100%;background:none;border:1px dashed var(--codgw-mix-white-18,rgba(255,255,255,.18));font-weight:400;color:var(--codgw-meta-label-color);justify-content:center;text-align:center}
.codgw-draw-winners-list{margin:0;padding:0;list-style:none;color:var(--cod-text-on-dark,#fff);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.codgw-draw-winners-list li{margin:0;line-height:1.45;padding:10px 12px;border-radius:14px;background:var(--codgw-kachel-tief,rgba(31,65,102,.07));border:1px solid var(--codgw-kachel-rand,rgba(31,65,102,.12));flex:0 0 auto;max-width:100%;display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--cod-gws-banner-winners-item,var(--cod-text-on-dark,#fff))!important;font-family:var(--cod-gws-banner-winners-item-font,inherit)!important;font-size:var(--cod-gws-banner-winners-item-size,inherit)!important}
.codgw-draw-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.codgw-draw-item{margin:0;height:100%}
.codgw-winner-box{margin:12px 16px 16px;border-radius:18px;padding:14px;background:rgba(0,0,0,.05);font-weight:800}
.codgw-winner-box--compact{margin-top:14px}
.codgw-winner-current{font-size:20px;margin-bottom:8px}
.codgw-winner-list{margin:8px 0 0 22px}
.codgw-reveal{animation:codgwPulse 1.2s ease-in-out infinite}
/* ── Modal ───────────────────────────────────────────────────────────────── */
.codgw-modal{position:fixed;inset:0;z-index:999999;display:none}
.codgw-modal.is-open{display:block}
.codgw-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.codgw-modal-panel{position:relative;max-width:560px;margin:8vh auto;background:var(--cod-card-bg,#fff);border-radius:calc(var(--codgw-card-radius) * 1.45);padding:28px;border:1px solid var(--codgw-border);box-shadow:var(--codgw-shadow-modal)}
.codgw-modal-close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:32px;cursor:pointer;color:var(--codgw-title)}
.codgw-modal-hint{margin:8px 0 18px;color:var(--codgw-meta);line-height:1.5}
.codgw-identity-display{margin:0 0 16px;padding:10px 14px;background:var(--codgw-soft,#f3f4f6);border-radius:8px;color:var(--codgw-title);font-size:14px;font-weight:600}
.codgw-membership-note{background:var(--codgw-soft);border-radius:calc(var(--codgw-button-radius) + 6px);padding:12px;color:var(--codgw-title)}
.codgw-membership-note a{color:var(--cod-cta,#2563eb);font-weight:800}
/* ── Embed-Teilnahme-Formular (Stufe B) ──────────────────────────────────── */
/* Honeypot: absolut unsichtbar fuer Menschen, Bots fuellen es aus. */
.codgw-hp-wrap{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden;pointer-events:none}
.codgw-hp-wrap input{height:0;width:0;padding:0;margin:0;border:0;display:block}
/* Meldungs-Box nach Submit */
/* ── Teilnahme-Popup (Stufe B): Standard-Modal-Design (.cod-modal) ───────── */
.codgw-embed-heading{margin:0 0 6px;padding-right:52px;font-size:22px;line-height:1.25;font-weight:800;color:var(--cod-color-heading,#1f4d86)}
.codgw-embed-subtitle{margin:0 0 16px;font-size:15px;line-height:1.45;font-weight:700;color:var(--cod-tag-color,#51B36F)}
.codgw-embed-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 18px;padding:14px 16px;border-radius:var(--cod-modal-field-radius,12px);background:var(--cod-soft,#eef6ff)}
.codgw-embed-facts dt{margin:0;align-self:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cod-meta,#5a7a99)}
.codgw-embed-facts dd{margin:0;font-size:15px;font-weight:700;line-height:1.4;color:var(--cod-title-color,#1f4166)}
.codgw-embed-identity{margin:0 0 14px;padding:11px 14px;border-radius:var(--cod-modal-field-radius,12px);background:var(--cod-surface-soft,#f7fbff);border:1px solid var(--cod-border,rgba(31,65,102,.12));font-size:14px;line-height:1.45;color:var(--cod-color-text,#4d4d4d)}
.codgw-embed-check{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;font-size:14px;line-height:1.45;color:var(--cod-color-text,#4d4d4d);cursor:pointer}
.codgw-embed-check input{flex:0 0 auto;width:auto!important;margin:2px 0 0!important;padding:0!important;accent-color:var(--cod-cta,#2b86c5)}
.codgw-embed-check span{flex:1 1 auto;min-width:0}
.codgw-embed-terms{margin:0 0 12px;padding:10px 14px;border:1px solid var(--cod-border,rgba(31,65,102,.12));border-radius:var(--cod-modal-field-radius,12px)}
.codgw-embed-terms summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--cod-color-heading,#1f4d86)}
.codgw-embed-terms-body{margin-top:8px;font-size:14px;line-height:1.55;white-space:pre-line;color:var(--cod-color-text,#4d4d4d)}
.codgw-embed-legal{margin:0 0 16px;font-size:12px;line-height:1.5;color:var(--cod-meta,#5a7a99)}
.codgw-embed-legal a{color:var(--cod-cta,#2b86c5);font-weight:700}
.codgw-embed-agb-doc{margin:0 0 16px;padding:14px 16px;border:1px solid var(--cod-border,rgba(31,65,102,.12));border-radius:var(--cod-modal-field-radius,12px);background:var(--cod-surface-soft,#f7fbff);font-size:13px;line-height:1.55;max-height:320px;overflow:auto}
.codgw-embed-agb-doc h1,.codgw-embed-agb-doc h2,.codgw-embed-agb-doc h3{font-size:15px;margin:12px 0 6px}
.codgw-embed-agb-doc h1:first-child,.codgw-embed-agb-doc h2:first-child{margin-top:0}
.codgw-embed-msg{display:block;border-radius:calc(var(--codgw-button-radius) + 4px);padding:12px 14px;font-size:14px;font-weight:700;line-height:1.45;margin-top:12px}
.codgw-embed-msg--success{background:var(--codgw-mix-green-12,rgba(81,179,111,.12));color:var(--cod-tag-color,#51B36F);border:1px solid var(--codgw-mix-green-28,rgba(81,179,111,.28))}
.codgw-embed-msg--error{background:var(--codgw-mix-danger-10,rgba(229,62,62,.1));color:#c53030;border:1px solid var(--codgw-mix-danger-22,rgba(229,62,62,.22))}
/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes codgwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes codgwSpin{to{transform:rotate(360deg)}}
@keyframes codgwFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes codgwGlow{0%,100%{transform:translateY(0);text-shadow:var(--codgw-shadow-glow-a)}50%{transform:translateY(-2px);text-shadow:0 18px 34px rgba(255,255,255,.16),var(--codgw-shadow-glow-b)}}
@keyframes codgwFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,16px,0)}}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1024px){
.codgw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.codgw-debug-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.codgw-next-stage{grid-template-columns:1fr}
.codgw-next-draw-title{max-width:100%}
.codgw-draw-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
.codgw-grid{grid-template-columns:1fr}
.codgw-debug{padding:16px}
.codgw-debug-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.codgw-form-grid{grid-template-columns:1fr}
/* Hier standen bis zum 07.08.2026 zwei eigene Innenabstände fürs Handy
(.codgw-content 16 statt 22, .codgw-giveaway-top 14 statt 18). Genau
sie haben die Karte auf schmalen Geräten zu einer anderen gemacht:
gemessen 41 / 38 / 46 / 49 Promille der Kartenbreite bei
360 / 390 / 820 / 1440 px - der grösste Ausreisser des ganzen
Abstands-Inventars. Ein Wert je Breite kann nicht verhältnistreu sein.
Beide sind ersatzlos weg; die Desktop-Zahl mal --cod-card-ui-scale
liefert auf 360 px von selbst 17 statt 18 px. Nicht wieder anlegen. */
.codgw-giveaway-top{min-height:auto}
.codgw-giveaway-top-main{padding-right:0}
.codgw-giveaway-prize-title{font-size:max(var(--cod-card-min-font, 13px), calc(18px * var(--cod-card-ui-scale, 1)))!important;line-height:1.2!important;font-weight:700!important;margin:0!important;color:var(--cod-title-color,#1f4166);font-family:var(--e-global-typography-dbdb71b-font-family,inherit);white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
.codgw-giveaway-extra{font-size:14px;line-height:1.4;font-weight:600;color:var(--cod-color-text,#4d4d4d);min-height:19px;margin-top:0}
.codgw-draw-list{grid-template-columns:1fr}
.codgw-next-draw{padding:22px;border-radius:calc(var(--codgw-card-radius) * 1.55)}
.codgw-next-draw-shell{gap:22px}
.codgw-next-stage{grid-template-columns:1fr;gap:0}
.codgw-next-panels{gap:0}
.codgw-next-draw-intro{gap:12px}
.codgw-next-eyebrow,.codgw-next-kicker{width:100%;justify-content:center}
.codgw-next-draw-title{font-size:clamp(2.15rem,11vw,3rem);max-width:100%}
.codgw-next-draw-copy{font-size:1rem;line-height:1.6}
.codgw-countdown-card,.codgw-draw-winners-box{padding:20px;border-radius:calc(var(--codgw-card-radius) * 1.33)}
.codgw-countdown-card{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.codgw-draw-winners-box{border-top-left-radius:0;border-top-right-radius:0;border-top:0;box-shadow:none}
.codgw-countdown{font-size:clamp(2.3rem,11vw,3.6rem)}
.codgw-draw-meta-list{flex-direction:column}
.codgw-draw-meta-pill{min-width:0}
.codgw-draw-winners-box{min-height:auto}
.codgw-modal-panel{margin:5vh 14px}
/* Hier standen zwei weitere tote Dubletten (.cod-date und ihr Preis-Chip),
wortgleich mit den Regeln im Source-Embed-Block weiter unten. Gleiche
Spezifität, aber die späteren gewinnen - diese hier wirkten an keiner
Breite. Das ist dieselbe Sorte Leiche wie die drei am 07.08.2026
entfernten; sie kostet jeden, der die Datei liest, einen Fehlversuch.
Gepflegt wird der Zwilling unten, er trägt jetzt die skalierten Werte. */
}
/* ── Source-Embed-CSS (eingebettete Event/Angebots/Partner-Karten) ─────────── */
.codgw-source-embed{border-radius:0;overflow:hidden;margin-bottom:0}
.codgw-source-embed .cod-card{border-radius:0;box-shadow:none;border:none;margin:0;padding:0 0 var(--codgw-fuss,14px) 0;position:relative}
.codgw-source-embed .cod-row{display:block!important}
.codgw-source-embed .cod-leftbar{display:none!important}
.codgw-source-embed .cod-bottombar{display:none!important}
.codgw-source-embed .cod-media{margin:0!important;width:100%!important;transform:none!important;position:relative!important;z-index:1!important}
.codgw-source-embed .cod-info-line,.codgw-source-embed .cod-card h3.cod-title,.codgw-source-embed .cod-place,.codgw-source-embed .cod-dist,.codgw-source-embed .cod-actions{padding:0 var(--codgw-rand,16px)!important;justify-content:flex-start!important;transform:none!important;gap:var(--codgw-reihe,12px)!important}
.codgw-source-embed .cod-card:not(.angebot-card) h3.cod-title{font-size:max(var(--cod-card-min-font, 13px), calc(var(--cod-gws-titel-size, 18px) * var(--cod-card-ui-scale, 1)))!important;line-height:1.2!important;font-weight:700!important;max-width:none!important;max-height:calc(1.2em * 3)!important;margin:var(--codgw-fuss,14px) var(--codgw-rand,16px) var(--codgw-zeile,10px) var(--codgw-rand,16px)!important;padding:0!important;color:var(--cod-title-color,#1f4166)!important}
.codgw-source-embed .cod-info-line{display:block!important;margin:0 var(--codgw-rand,16px) var(--codgw-luft,4px) var(--codgw-rand,16px)!important;transform:none!important}
.codgw-source-embed .cod-place,.codgw-source-embed .cod-dist{font-size:16px!important;line-height:1.35!important;color:var(--cod-text)!important}
.codgw-source-embed .cod-place{display:block!important;margin:0 0 var(--codgw-luft,4px) 0!important}
.codgw-source-embed .cod-dist{display:block!important;margin:0 0 var(--codgw-zeile,10px) 0!important}
.codgw-source-embed .cod-actions{padding:0 var(--codgw-rand,16px)!important;justify-content:flex-start!important;transform:none!important;gap:var(--codgw-reihe,12px)!important}
/* Die feste Schriftgrösse ist hier bewusst NICHT mehr angegeben. Sie stand
als font-size:14px!important genau an dieser Stelle und schlug mit ihren
drei Klassen die skalierende Regel weiter unten (zwei Klassen) - der Knopf
war damit der einzige Text der Kachel, der weder der Karte noch dem
Dashboard folgte. Wer sie zurückschreibt, dreht beides auf einen Schlag
zurück. Die wirkende Angabe steht bei .codgw-card .cod-cta. */
.codgw-source-embed .cod-actions .cod-cta,.codgw-source-embed .cod-actions .cod-cta.secondary{padding:var(--codgw-fuss,14px) var(--codgw-rand,16px)!important;min-width:auto!important;min-height:auto!important;line-height:1.2!important;border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px))!important}
.codgw-source-embed .cod-date{position:absolute!important;right:var(--codgw-fuss,14px)!important;top:calc(150px * var(--cod-card-ui-scale, 1))!important;left:auto!important;bottom:auto!important;margin:0!important;min-height:auto!important;transform:none!important;font-size:16px!important;color:var(--cod-price-date-color)!important;z-index:5!important;background:var(--cod-card-bg,rgba(255,255,255,.92))!important;border-radius:var(--codgw-badge-radius)!important;padding:var(--codgw-zeile,10px) var(--codgw-reihe,12px)!important;-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important;box-sizing:border-box!important;display:inline-flex!important;flex-direction:column!important;gap:calc(3px * var(--cod-card-ui-scale, 1))!important;max-width:185px!important}
.codgw-source-embed .cod-date .row{display:flex!important;flex-direction:column!important;gap:var(--codgw-luft,4px)!important}
.codgw-source-embed .cod-date .only-date,.codgw-source-embed .cod-date .only-time,.codgw-source-embed .cod-date .start.multi,.codgw-source-embed .cod-date .end{display:block!important;margin:0!important;line-height:1.15!important;color:var(--cod-price-date-color)!important}
.codgw-source-embed .cod-date .end::before{color:var(--cod-price-date-color)!important;background:none!important}
.codgw-source-embed .cod-date .t::after{background:var(--cod-price-date-color)!important}
.codgw-source-embed .cod-card .cod-badge{position:absolute!important;left:calc(16px * var(--cod-card-ui-scale, 1))!important;top:calc(150px * var(--cod-card-ui-scale, 1))!important;right:auto!important;width:calc(64px * var(--cod-card-ui-scale, 1))!important;height:calc(64px * var(--cod-card-ui-scale, 1))!important;margin:0!important;border-radius:var(--codgw-badge-radius)!important;z-index:10!important}
.codgw-source-embed .cod-date .cod-price-chip{position:static!important;transform:none!important;font-size:14px!important;padding:calc(8px * var(--cod-card-ui-scale, 1)) var(--codgw-fuss,14px)!important;background:var(--cod-card-bg,rgba(255,255,255,.92))!important;margin-top:var(--codgw-luft,4px)!important;display:inline-flex!important}
.codgw-draw-item--sourced{padding:0!important;overflow:hidden}
.codgw-card--sourced .codgw-content{padding-top:var(--codgw-fuss,14px)}
/* Die Partner-Kachel bringt nur Rundbild, Name und Rolle mit - sie kann die
Kartenhoehe nicht fuellen, und ihr rundes Bild laesst sich auch nicht
strecken. Statt unten einen leeren Streifen zu lassen, sitzt ihr Inhalt
deshalb mittig: Der uebrige Platz verteilt sich dann gleichmaessig und
liest sich als Rand, nicht als fehlender Inhalt.
Die untere Trennlinie faellt dabei weg - sie markierte das Ende eines
Inhalts, unter dem nichts mehr kommt. */
.codgw-card > .codgw-source-embed{display:flex;flex-direction:column}
.codgw-card .codgw-source-tile{flex:1 1 auto;justify-content:center;border-bottom:0}
.codgw-source-tile{display:flex;flex-direction:column;background:var(--cod-color-bg-soft,#f7f8fa);border-bottom:1px solid var(--codgw-border)}
.codgw-source-img{width:100%;overflow:hidden;max-height:200px}
.codgw-source-img img{width:100%;height:200px;object-fit:cover;display:block}
.codgw-source-img--round{display:flex;justify-content:center;align-items:center;padding:var(--codgw-kopf,18px) var(--codgw-kopf,18px) 0;max-height:none}
.codgw-source-img--round img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.codgw-source-body{padding:var(--codgw-fuss,14px) var(--codgw-rand,16px) var(--codgw-rand,16px);flex:1}
.codgw-source-body h4{font-size:17px;font-weight:800;margin:0 0 var(--codgw-eng,6px);line-height:1.2;color:var(--codgw-title)!important}
.codgw-source-meta{font-size:13px;color:var(--cod-color-muted,#646970);margin:2px 0}
.codgw-partner-tile .codgw-source-body{text-align:center}
.codgw-partner-tile .codgw-source-img--round{padding-top:calc(20px * var(--cod-card-ui-scale, 1))}
.codgw-source-embed .angebot-provider-chip img{border-radius:50%!important;width:32px!important;height:32px!important;flex-shrink:0!important}
/* Derselbe Knopf wie bei der Event-Kachel, nur bei einer eingebetteten
ANGEBOTS-Quelle heisst er anders. Er ist am 07.08.2026 mitgezogen worden,
weil in EINER Gewinnspiel-Liste beide Quellenarten nebeneinander stehen
koennen - dann saessen dort zwei verschieden aussehende Teilen-Knoepfe.
Gefunden hat das die QA-Durchsicht, nicht die Messung: Auf der Startseite
gibt es derzeit keine Gewinnspiel-Karte mit Angebots-Quelle, diese Fassung
ist deshalb angeglichen, aber NICHT am Bildschirm geprueft. */
.codgw-source-embed .angebot-share-fab{box-sizing:border-box!important;padding:0!important;width:calc(var(--cod-gws-event-share-size, var(--cod-btn-angebot-height, 40px)) * var(--cod-card-ui-scale, 1))!important;height:calc(var(--cod-gws-event-share-size, var(--cod-btn-angebot-height, 40px)) * var(--cod-card-ui-scale, 1))!important;border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px))!important;background:var(--cod-gws-event-share-bg, var(--cod-btn-event-bg, var(--cod-btn-secondary-bg, #ffffff)))!important;border:var(--cod-btn-event-border-width, 2px) solid var(--cod-btn-event-border-color, var(--cod-btn-secondary-border, var(--cod-btn-secondary-text, #3598DB)))!important;color:var(--cod-gws-event-share-color, var(--cod-btn-event-color, var(--cod-btn-secondary-text, #3598DB)))!important;display:flex!important;align-items:center!important;justify-content:center!important}
.codgw-source-embed .angebot-share-fab:hover,.codgw-source-embed .angebot-share-fab:focus-visible{background:var(--cod-gws-event-share-bg-hover, var(--cod-btn-event-hover-bg, var(--cod-btn-secondary-hover-bg, #3598DB)))!important;border-color:var(--cod-btn-event-hover-border-color, var(--cod-btn-secondary-border-hover, #3598DB))!important;color:var(--cod-btn-event-hover-color, var(--cod-btn-secondary-hover-text, #ffffff))!important}
.codgw-source-embed .angebot-location-name,.codgw-source-embed .angebot-distance-line{font-size:max(var(--cod-card-min-font, 13px), calc(16px * var(--cod-card-ui-scale, 1)))!important;line-height:1.4!important}
.codgw-source-embed .angebote-location-btn{font-size:14px!important;line-height:1.4!important}
.codgw-source-embed .angebot-share-fab.codgw-share{margin-top:0!important;background:var(--cod-gws-event-share-bg, var(--cod-btn-event-bg, var(--cod-btn-secondary-bg, #ffffff)))!important;border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px))!important;padding:0!important}
.codgw-source-embed .angebot-card.cod-card{padding:0 0 var(--codgw-fuss,14px) 0!important;border-radius:0!important;box-shadow:none!important;border:none!important;margin:0!important}
.codgw-source-embed .angebot-card .cod-media,.codgw-source-embed .angebot-card .angebot-image-wrap,.codgw-source-embed .angebot-card .codgw-angebot-image-wrap{margin:0!important;width:100%!important}
.codgw-source-embed .angebot-card .cod-title,.codgw-source-embed .angebot-card h3.cod-title,.codgw-source-embed .angebot-card .angebot-title,.codgw-source-embed .angebot-card .codgw-angebot-title{font-size:max(var(--cod-card-min-font, 13px), calc(var(--cod-gws-titel-size, 18px) * var(--cod-card-ui-scale, 1)))!important;line-height:1.2!important;font-weight:700!important;margin:var(--codgw-fuss,14px) var(--codgw-rand,16px) var(--codgw-zeile,10px) var(--codgw-rand,16px)!important;padding:0!important;text-indent:0!important;max-width:calc(100% - 32px)!important;min-height:0!important;max-height:calc(1.2em * 2)!important;color:var(--cod-title-color,#1f4166)!important}
.codgw-source-embed .angebot-card .angebot-location-name,.codgw-source-embed .angebot-card .angebot-distance-line,.codgw-source-embed .angebot-card .codgw-angebot-location-name,.codgw-source-embed .angebot-card .codgw-angebot-distance-line{font-size:max(var(--cod-card-min-font, 13px), calc(16px * var(--cod-card-ui-scale, 1)))!important;line-height:1.35!important;color:var(--cod-color-text,#4d4d4d)!important;margin:0!important;font-family:inherit!important}
.codgw-source-embed .angebot-card .angebot-location-meta,.codgw-source-embed .angebot-card .codgw-angebot-location-meta{margin:0 var(--codgw-rand,16px) var(--codgw-rand,16px) var(--codgw-rand,16px)!important;gap:var(--codgw-luft,4px)!important;min-height:0!important}
.codgw-source-embed .angebot-card .angebote-location-btn,.codgw-source-embed .angebot-card .codgw-angebot-location-btn{font-size:16px!important;line-height:1.35!important;color:var(--cod-color-accent-blue,#2b86c5)!important}
.codgw-source-embed .angebot-card .cod-actions,.codgw-source-embed .angebot-card .angebot-actions,.codgw-source-embed .angebot-card .codgw-angebot-actions{margin:auto 0 0 0!important;padding:calc(2px * var(--cod-card-ui-scale, 1)) var(--codgw-rand,16px) 0 var(--codgw-rand,16px)!important;display:flex!important;gap:var(--codgw-reihe,12px)!important;align-items:flex-start!important;justify-content:flex-start!important;transform:none!important}
/* Zweite Fundstelle derselben festen 14 px - die erste sass 30 Zeilen weiter
oben bei .cod-actions .cod-cta. Sie greift bei eingebetteten ANGEBOTS-Karten
und hat mit ihren vier Klassen sogar die dortige Reparatur geschlagen. Genau
das meint der Bauplan mit "dieselbe Aushebelung steht selten nur an einer
Stelle": Wer nur die naheliegende Stelle anfasst, sieht Wirkung und hört auf
zu suchen. Auch hier steht die Grösse jetzt nur noch bei
.codgw-card .cod-cta. */
.codgw-source-embed .angebot-card .cod-actions .cod-cta,.codgw-source-embed .angebot-card .cod-actions .cod-cta.secondary,.codgw-source-embed .angebot-card .angebot-actions .cod-cta,.codgw-source-embed .angebot-card .codgw-angebot-actions .cod-cta,.codgw-source-embed .angebot-card .codgw-angebot-actions .cod-cta.secondary{line-height:1.2!important;font-weight:700!important;padding:var(--codgw-fuss,14px) var(--codgw-rand,16px)!important;min-height:auto!important;min-width:auto!important;border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px))!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important}
.codgw-source-embed .cod-media,.codgw-source-embed .angebot-image-wrap,.codgw-source-embed .codgw-angebot-image-wrap{position:relative!important;overflow:hidden!important}
.codgw-source-slider{position:relative!important;overflow:hidden!important}
.codgw-source-slider img{transition:opacity .65s ease-in-out!important}
.codgw-source-slider .codgw-source-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:0!important;z-index:2!important;transition:opacity .65s ease-in-out!important;pointer-events:none!important}
.codgw-source-slider .codgw-source-slide.is-active{opacity:1!important}
.codgw-source-slider>img:first-child{opacity:1!important}
.codgw-source-slider.is-sliding>img:first-child{opacity:0!important}
.codgw-card .codgw-image,.codgw-card .codgw-image img,.codgw-source-embed .cod-media,.codgw-source-embed .cod-media img,.codgw-source-embed .angebot-image-wrap,.codgw-source-embed .angebot-image-wrap img,.codgw-source-embed .codgw-angebot-image-wrap,.codgw-source-embed .codgw-angebot-image-wrap img{border-radius:0!important}
.codgw-source-embed .codgw-event-media-frame{position:relative!important;overflow:hidden!important}
/* Runde OBERE Ecken am Titelbild (Entscheidung des Betreibers, 07.08.2026,
nach dem Vergleich der vier Fassungen). Das Bild stiess vorher an allen
Seiten hart an - die Karte wirkte dadurch wie ein Kasten.
Die Regel steht bewusst NACH der Sammelzeile weiter oben, die allen
Bildflaechen border-radius:0 gibt: gleiche Spezifitaet, die spaetere
gewinnt. Wer sie davor schiebt, dreht die Rundung stillschweigend zurueck.
Der Wert skaliert mit der Karte wie jedes andere Mass, sonst waere er auf
dem Handy anteilig staerker als am Desktop. 14px sind gemessen: 8px waren
am Desktop kaum zu erkennen, 18px runden staerker als die Karte selbst
(10px) und lassen das Bild vor ihr schweben. Das Bild behaelt seine
eckigen Ecken - beschnitten wird ueber overflow am Rahmen. */
.codgw-card .codgw-image,.codgw-source-embed .cod-media,.codgw-source-embed .codgw-event-media-frame{border-top-left-radius:var(--cod-card-border-radius-top-left, var(--cod-card-radius, 5px))!important;border-top-right-radius:var(--cod-card-border-radius-top-right, var(--cod-card-radius, 5px))!important;overflow:hidden!important}
.codgw-source-embed .codgw-event-media-frame .cod-badge{position:absolute!important;right:calc(8px * var(--cod-card-ui-scale, 1))!important;top:calc(8px * var(--cod-card-ui-scale, 1))!important;left:auto!important;bottom:auto!important;width:calc(var(--cod-gws-event-badge-size, 58px) * var(--cod-card-ui-scale, 1))!important;height:calc(var(--cod-gws-event-badge-size, 58px) * var(--cod-card-ui-scale, 1))!important;margin:0!important;border-radius:var(--cod-badge-radius,16px)!important;z-index:10!important;border:calc(var(--cod-gws-event-badge-border-width, 3px) * var(--cod-card-ui-scale, 1)) solid var(--cod-gws-event-badge-border,var(--cod-color-star,#FFCD02))!important;background:var(--cod-card-bg,#fff)!important;box-shadow:0 2px 8px rgba(0,0,0,.18)!important;overflow:hidden!important}
.codgw-source-embed .codgw-event-media-frame .cod-badge img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important}
.codgw-source-embed .codgw-event-media-frame .cod-date{position:absolute!important;right:var(--codgw-rand,16px)!important;bottom:var(--codgw-rand,16px)!important;left:auto!important;top:auto!important;margin:0!important;min-height:auto!important;transform:none!important;font-size:16px!important;color:var(--cod-price-date-color,#2b86c5)!important;z-index:10!important;background:var(--cod-card-bg,rgba(255,255,255,.92))!important;border-radius:var(--codgw-badge-radius)!important;padding:var(--codgw-zeile,10px) var(--codgw-reihe,12px)!important;-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;gap:calc(3px * var(--cod-card-ui-scale, 1))!important;max-width:190px!important}
.codgw-source-embed .codgw-event-media-frame .cod-date .cod-price-chip{display:none!important}
.codgw-source-embed .cod-actions{display:flex!important;align-items:center!important;gap:var(--codgw-reihe,12px)!important;padding:0 var(--codgw-rand,16px)!important;margin:auto 0 0 0!important;padding-top:calc(2px * var(--cod-card-ui-scale, 1))!important}
.codgw-source-embed .cod-actions .cod-cta.cod-info{flex:1 1 auto!important;justify-content:center!important}
.codgw-source-embed .cod-actions .cod-event-share-fab{flex:0 0 auto!important}
.codgw-source-embed .cod-dist{display:none!important}
.codgw-source-embed--event .cod-info-line{padding:0!important;margin:0 var(--codgw-rand,16px) var(--codgw-eng,6px) var(--codgw-rand,16px)!important}
.codgw-source-embed--event .cod-place{display:flex!important;align-items:center!important;gap:var(--codgw-eng,6px)!important;padding:0!important;margin:0!important;color:var(--cod-gws-event-text,var(--cod-text,#1f2937))!important}
.codgw-source-embed--event .codgw-event-date-line{display:flex!important;align-items:center!important;gap:var(--codgw-eng,6px)!important;font-size:16px!important;line-height:1.35!important;font-weight:600!important;margin:0 var(--codgw-rand,16px) var(--codgw-fuss,14px) var(--codgw-rand,16px)!important;color:var(--cod-gws-event-date,var(--cod-meta,#5a7a99))!important}
.codgw-source-embed--event .codgw-line-icon{flex:0 0 auto!important;width:calc(var(--cod-gws-event-icon-size, 16px) * var(--cod-card-ui-scale, 1))!important;height:calc(var(--cod-gws-event-icon-size, 16px) * var(--cod-card-ui-scale, 1))!important;color:var(--cod-gws-event-icon,currentColor)!important}
/* Die Zeilentexte der eingebetteten Quelle hatten gar keine eigene
Grössenangabe und erbten ihre 16 px - standen also auf jeder Breite
gleich gross, während die Karte mitwächst (47 gegen 44 Promille).
Grundwert ist der bisherige sichtbare Wert, damit sich am Desktop
nichts ändert; die Untergrenze liegt unter 16 x 0,756 = 12,1. */
/* Knopfschrift der eingebetteten Quelle ("Zum Event"). Sie kommt aus der
gemeinsamen .cod-cta-Regel ausserhalb dieser Datei und stand deshalb
fest bei 14 px - als letzter Text der Karte, der nicht mitwuchs
(41 gegen 38 Promille). Nur innerhalb der Gewinnspiele-Kachel
umgestellt, damit dieselbe Schaltfläche anderswo unberührt bleibt. */
/* "Zum Event" sieht aus wie "Mehr erfahren" der Angebote-Karte - und zwar
ueber DIESELBEN Rollen, nicht ueber gleiche Werte. Wer im Dashboard den
Angebote-Knopf umstellt, stellt diesen mit um.
Feste Hoehe statt senkrechter Polsterung, genau wie dort. Die Flaeche
wird als Kurzform gesetzt (background, nicht background-color): Der
Knopf trug seine Farbe ueber ein Hintergrundbild, eine reine
Farbangabe haette es stehen lassen. */
.codgw-card .cod-cta,.codgw-card .cod-cta.cod-info{border:var(--cod-btn-angebot-border-width, 0px) solid var(--cod-btn-angebot-border-color, transparent)!important;border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px))!important;background:var(--cod-btn-angebot-bg, var(--cod-cta, #51B36F))!important;color:var(--cod-btn-angebot-color, #fff)!important;height:calc(var(--cod-btn-angebot-height, 40px) * var(--cod-card-ui-scale, 1))!important;min-height:calc(var(--cod-btn-angebot-height, 40px) * var(--cod-card-ui-scale, 1))!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 calc(16px * var(--cod-card-ui-scale, 1))!important;font-weight:var(--cod-font-btn-angebot-weight, 700)!important}
/* Schriftgrösse des Knopfes der eingebetteten Quelle ("Zum Event").
HIER und nirgends sonst - die beiden festen 14 px weiter oben sind genau
deshalb entfernt.
Warum nicht mehr --cod-font-btn-angebot-size (Stand bis 07.08.2026):
Diese Variable ist WIDGET-gebunden. Das Angebote-Widget setzt sie auf
seinem Elementor-Rahmen auf 1.0rem (16 px) - von der Gewinnspiel-Karte aus
ist davon nichts zu sehen, dort gilt der Wert der Seitenwurzel: 1.25rem,
also 20 px. Gemessen am 07.08.2026 an derselben Seite:
Angebote-Kachel --cod-font-btn-angebot-size 1.0rem -> "Mehr erfahren" 16 px
Gewinnspiel dieselbe Variable 1.25rem -> waere 20 px
Der Knopf haette damit weder den sichtbaren Wert des Nachbarn getroffen
noch einen, den irgendjemand für ihn eingestellt hat.
Die Kette ist deshalb dieselbe wie bei der Fläche eine Zeile tiefer:
eigener Regler -> Grundwert. 16 px ist der bisherige sichtbare Wert der
übrigen Kacheltexte (Ort und Datum stehen direkt darüber auf demselben
Grundwert) und genau der Wert, den "Mehr erfahren" der Angebote-Kachel
zeigt - die beiden Knöpfe sehen damit wieder gleich aus.
Untergrenze 11 px: sie muss unter 16 x 0,756 = 12,1 liegen, sonst
verschluckt sie die unterste Stufe des Reglers (Regel in Abschnitt 18). */
.codgw-card .cod-cta,.codgw-card .cod-cta span{font-size:max(var(--cod-card-min-font, 13px), calc(var(--cod-gws-cta-size, 16px) * var(--cod-card-ui-scale, 1)))!important}
/* Der SEKUNDAERE Knopf ("Termin buchen" bei einer eingebetteten Angebots-
Karte) war blau auf blau und damit unlesbar. Zwei Dateien haben sich
gebissen: Die Flaeche kam aus der Regel darueber (Button 1, blau), die
Schrift aus angebote.css (Button 2, ebenfalls blau) - und die laedt NACH
dieser Datei, gewinnt bei gleicher Spezifitaet also.
Aufgefallen ist es erst am 07.08.2026, weil es bis dahin keine
Gewinnspiel-Karte mit Angebots-Quelle zum Ansehen gab. Eine Testkarte hat
den Fehler in der ersten Minute gezeigt.
Er bekommt jetzt den vollstaendigen zweiten Button-Stil - dieselbe Kette
wie der Teilen-Knopf, damit in einer Karte nicht drei Knopfarten stehen.
Die doppelte Klasse hebt die Spezifitaet auf vier, ohne eine Annahme
ueber die Struktur darueber zu treffen. */
.codgw-card .cod-cta.cod-cta.secondary{background:var(--cod-btn-event-bg, var(--cod-btn-secondary-bg, #ffffff))!important;border:var(--cod-btn-event-border-width, 2px) solid var(--cod-btn-event-border-color, var(--cod-btn-secondary-border, var(--cod-btn-secondary-text, #3598DB)))!important;color:var(--cod-btn-event-color, var(--cod-btn-secondary-text, #3598DB))!important}
.codgw-card .cod-cta.cod-cta.secondary:hover,.codgw-card .cod-cta.cod-cta.secondary:focus-visible{background:var(--cod-btn-event-hover-bg, var(--cod-btn-secondary-hover-bg, #3598DB))!important;color:var(--cod-btn-event-hover-color, var(--cod-btn-secondary-hover-text, #ffffff))!important}
.codgw-source-embed--event .codgw-line-text{font-size:max(var(--cod-card-min-font, 13px), calc(16px * var(--cod-card-ui-scale, 1)))!important;min-width:0!important}
.codgw-source-embed--event .cod-actions .cod-cta.cod-info{background:var(--cod-gws-event-cta-bg, var(--cod-btn-primary-bg, var(--cod-cta, #51B36F)))!important;color:var(--cod-gws-event-cta-color, var(--cod-btn-primary-text, #fff))!important}
/* Zweite Fundstelle der Teilen-Flaeche - vier Klassen, sie schlaegt die
Grundregel weiter unten. Ohne sie blieb der Knopf pink, obwohl die
Umstellung auf Button 2 dort laengst stand (gemessen am 07.08.2026).
Beide tragen jetzt dieselbe Kette. */
.codgw-source-embed--event .cod-actions .cod-event-share-fab{background:var(--cod-gws-event-share-bg, var(--cod-btn-event-bg, var(--cod-btn-secondary-bg, #ffffff)))!important;border:var(--cod-btn-event-border-width, 2px) solid var(--cod-btn-event-border-color, var(--cod-btn-secondary-border, var(--cod-btn-secondary-text, #3598DB)))!important;color:var(--cod-gws-event-share-color, var(--cod-btn-event-color, var(--cod-btn-secondary-text, #3598DB)))!important}
.codgw-source-embed--event .cod-event-share-fab span{background:transparent!important}
.codgw-source-embed--event .cod-actions .cod-cta.cod-info:hover{background:var(--cod-gws-event-cta-bg-hover,var(--cod-gws-event-cta-bg,linear-gradient(135deg,var(--cod-cta,#2b86c5),var(--cod-info,#2b86c5))))!important;color:var(--cod-gws-event-cta-color-hover,var(--cod-gws-event-cta-color,var(--cod-text-on-dark,#fff)))!important}
.codgw-source-embed--event .cod-actions .cod-event-share-fab:hover,.codgw-source-embed--event .cod-actions .cod-event-share-fab:focus-visible{background:var(--cod-gws-event-share-bg-hover, var(--cod-btn-event-hover-bg, var(--cod-btn-secondary-hover-bg, #3598DB)))!important;border-color:var(--cod-btn-event-hover-border-color, var(--cod-btn-secondary-border-hover, #3598DB))!important;color:var(--cod-btn-event-hover-color, var(--cod-btn-secondary-hover-text, #ffffff))!important}
/* Zwei Abstände, die von ausserhalb dieser Datei kommen und deshalb erst bei
der Gegenmessung am 07.08.2026 auffielen: die Lücke zwischen Symbol und
Beschriftung im Knopf (8 px aus der gemeinsamen .cod-cta-Regel) und die
Polsterung des Teilen-Knopfes (12/16 px aus events.css). Beide standen fest
und wanderten damit über die Prüfmasse (24/22/21/22 bzw. 47/43/41/44
Promille). Sie werden hier innerhalb der Karte nachgezogen - die
Ursprungsregeln bleiben unangetastet, sie gelten auch für die Events-Kachel. */
.codgw-card .cod-cta{gap:var(--codgw-knopf,8px)!important}
/* Der Teilen-Knopf ist ein KNOPF (Entscheidung des Betreibers, 07.08.2026) -
also dieselbe Rundungs-Rolle wie "Zum Event" und "Teilnehmen", nicht die
allgemeine Dashboard-Rundung. Gemessen war er vorher der einzige Ausreisser
der Karte: Radius 10 aus --codgw-button-radius neben Radius 8 aus
--cod-btn-angebot-border-radius bei beiden Knöpfen daneben.
Umgestellt sind alle FÜNF Stellen mit dieser Kette, nicht nur die gemessene:
zwei davon werden heute von späteren Regeln geschlagen und wären still
zurückgekommen, sobald dort jemand aufräumt. */
/* Der Teilen-Knopf traegt den ZWEITEN Button-Stil des Dashboards
(Entscheidung des Betreibers, 07.08.2026): weisse Flaeche, blauer Rand,
blaues Symbol. Die Kette ist dieselbe wie beim Events-Knopf der
Partner-Karte - widget-nahe Rolle, dann die allgemeine Rolle, dann der
Notnagel. Gemessen liefern die Rollen live #ffffff / #3598DB / #3598DB
und 2px Rahmen; wer im Dashboard Button 2 umstellt, stellt diesen Knopf
mit um.
QUADRATISCH und genau so hoch wie "Zum Event" daneben: Deshalb steht hier
--cod-btn-angebot-height (die Hoehe des Nachbarn) und NICHT die Hoehe der
Button-2-Rolle - sonst stuenden zwei Knoepfe derselben Reihe verschieden
hoch, sobald jemand eine der beiden Rollen anfasst. box-sizing gehoert
dazu, sonst treibt der 2px-Rand den Knopf ueber die Hoehe des Nachbarn. */
.codgw-source-embed .cod-event-share-fab{padding:0!important;box-sizing:border-box!important;width:calc(var(--cod-gws-event-share-size, var(--cod-btn-angebot-height, 40px)) * var(--cod-card-ui-scale, 1))!important;height:calc(var(--cod-gws-event-share-size, var(--cod-btn-angebot-height, 40px)) * var(--cod-card-ui-scale, 1))!important;border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px))!important;background:var(--cod-gws-event-share-bg, var(--cod-btn-event-bg, var(--cod-btn-secondary-bg, #ffffff)))!important;border:var(--cod-btn-event-border-width, 2px) solid var(--cod-btn-event-border-color, var(--cod-btn-secondary-border, var(--cod-btn-secondary-text, #3598DB)))!important;color:var(--cod-gws-event-share-color, var(--cod-btn-event-color, var(--cod-btn-secondary-text, #3598DB)))!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;font-size:22px!important;line-height:1!important;box-shadow:var(--codgw-shadow-action)!important;margin:0!important}
.codgw-source-embed .cod-event-share-fab:hover,.codgw-source-embed .cod-event-share-fab:focus-visible{background:var(--cod-gws-event-share-bg-hover, var(--cod-btn-event-hover-bg, var(--cod-btn-secondary-hover-bg, #3598DB)))!important;border-color:var(--cod-btn-event-hover-border-color, var(--cod-btn-secondary-border-hover, var(--cod-btn-event-border-color, #3598DB)))!important;color:var(--cod-btn-event-hover-color, var(--cod-btn-secondary-hover-text, #ffffff))!important}
.codgw-source-embed .cod-event-share-fab span{line-height:1!important}
/* Das Symbol ist ein ![]()
und laesst sich deshalb nicht ueber color
einfaerben - ein externes SVG kennt currentColor nicht. Es wird darum mit
sich selbst maskiert und die Flaeche mit currentColor gefuellt: Damit
folgt es der Knopffarbe aus der Rolle und wechselt beim Zeigen von selbst
mit, ohne dass irgendwo eine zweite Farbe gepflegt werden muss.
Die Grafik liegt dafuer LOKAL in cod-embed und wird relativ zu dieser
Datei geladen. Der erste Anlauf holte sie von der Zentrale - und genau
daran ist er gescheitert: Eine Maske von fremder Herkunft verwirft der
Browser, und dann ist nicht etwa die Maske weg, sondern das ganze Symbol.
Gemessen sah alles richtig aus (mask-image gesetzt, Flaeche blau), am
Bildschirm war der Knopf leer. Wer die Adresse wieder auf die Zentrale
zeigen laesst, macht das Symbol erneut unsichtbar. Der frueher hier
stehende filter:brightness(0) invert(1) haette es weiss auf weiss gemacht,
also unsichtbar; er ist deshalb ausdruecklich abgeschaltet. */
.codgw-share-icon{width:calc(var(--cod-angebot-share-glyph-size, 22px) * var(--cod-card-ui-scale, 1))!important;height:calc(var(--cod-angebot-share-glyph-size, 22px) * var(--cod-card-ui-scale, 1))!important;max-width:none!important;max-height:none!important;display:block!important;object-fit:contain!important;filter:brightness(0) invert(1)!important;flex:0 0 calc(var(--cod-angebot-share-glyph-size, 22px) * var(--cod-card-ui-scale, 1))!important}
/* ZWEITER Anlauf, und der erste war ein Fehlbefund: Eine Maske DIREKT auf dem
![]()
schneidet zwar die Silhouette aus, das Bild selbst bleibt aber im
Vordergrund - die eingefaerbte Flaeche liegt dahinter und ist nie zu sehen.
Das Symbol blieb deshalb schwarz. Aufgefallen ist es erst am zweiten
Bildschirmfoto: Im ersten war die Grafik noch nicht geladen, das leere
![]()
gab die blaue Flaeche frei, und es sah richtig aus. Ein einzelnes
Bild ist bei ladenden Grafiken also kein Beleg.
Loesung: das ![]()
ausblenden und das Symbol als eigene Flaeche am Knopf
zeichnen. currentColor sorgt dafuer, dass es der Knopffarbe folgt und beim
Zeigen von selbst mitwechselt. */
/* Fremdes Symbol ausblenden: die Angebots-Quelle liefert ein img OHNE Klasse, die Event-Quelle eines mit .codgw-share-icon. Nur auf die Klasse zu zielen liess bei Angeboten beide Symbole nebeneinander im Flex stehen und quetschte sie auf 22x20 bzw. 14x22. */
.codgw-card .cod-event-share-fab .codgw-share-icon,.codgw-card .angebot-share-fab .codgw-share-icon,.codgw-card .cod-event-share-fab > img,.codgw-card .angebot-share-fab > img,.codgw-card .cod-event-share-fab > svg,.codgw-card .angebot-share-fab > svg{display:none!important}
.codgw-card .cod-event-share-fab::before,.codgw-card .angebot-share-fab::before{content:""!important;display:block!important;width:calc(var(--cod-angebot-share-glyph-size, 22px) * var(--cod-card-ui-scale, 1))!important;height:calc(var(--cod-angebot-share-glyph-size, 22px) * var(--cod-card-ui-scale, 1))!important;background-color:currentColor!important;-webkit-mask:url(../svg/share-solid-full.svg) center/contain no-repeat!important;mask:url(../svg/share-solid-full.svg) center/contain no-repeat!important;flex:0 0 auto!important}
@media(max-width:767px){.codgw-source-embed .angebot-card .cod-title{font-size:max(var(--cod-card-min-font, 13px), calc(var(--cod-gws-titel-size, 18px) * var(--cod-card-ui-scale, 1)))!important;line-height:1.28!important;max-height:calc(1.28em * 2)!important}}
.codgw-source-embed--event .cod-card h3.cod-title,.codgw-source-embed--event .cod-card .cod-title{color:var(--cod-gws-event-title,var(--cod-title-color,#1f4166))!important}
.codgw-source-embed--event .cod-place,.codgw-source-embed--event .cod-dist{color:var(--cod-gws-event-text,var(--cod-text,#1f2937))!important}
.codgw-source-embed--event .cod-card{background:var(--cod-gws-event-card-bg,var(--cod-card-bg,#fff))!important}
.codgw-source-embed--offer .angebot-card .cod-title,.codgw-source-embed--offer .angebot-card h3.cod-title,.codgw-source-embed--offer .angebot-card .angebot-title{color:var(--cod-gws-offer-title,var(--cod-title-color,#1f4166))!important}
.codgw-source-embed--offer .angebot-card .angebot-location-name,.codgw-source-embed--offer .angebot-card .angebot-distance-line{color:var(--cod-gws-offer-text,var(--cod-color-text,#4d4d4d))!important}
.codgw-source-embed--offer .angebot-card.cod-card{background:var(--cod-gws-offer-card-bg,var(--cod-card-bg,#fff))!important}
.codgw-source-embed--partner .codgw-source-tile{background:var(--cod-gws-partner-card-bg,var(--cod-color-bg-soft,#f7f8fa))!important}
.codgw-source-embed--partner .codgw-source-body h4{color:var(--cod-gws-partner-title,var(--codgw-title,#1f4166))!important}
.codgw-source-embed--partner .codgw-source-meta{color:var(--cod-gws-partner-text,var(--cod-color-muted,#646970))!important}
.codgw-source-embed--woocommerce .cod-card h3.cod-title,.codgw-source-embed--woocommerce .cod-card .cod-title{color:var(--cod-gws-woocommerce-title,var(--cod-title-color,#1f4166))!important}
.codgw-source-embed--woocommerce .cod-place,.codgw-source-embed--woocommerce .cod-dist{color:var(--cod-gws-woocommerce-text,var(--cod-text,#1f2937))!important}
.codgw-source-embed--woocommerce .cod-card{background:var(--cod-gws-woocommerce-card-bg,var(--cod-card-bg,#fff))!important}
.codgw-source-embed--course .cod-card h3.cod-title,.codgw-source-embed--course .cod-card .cod-title{color:var(--cod-gws-course-title,var(--cod-title-color,#1f4166))!important}
.codgw-source-embed--course .cod-place,.codgw-source-embed--course .cod-dist{color:var(--cod-gws-course-text,var(--cod-text,#1f2937))!important}
.codgw-source-embed--course .cod-card{background:var(--cod-gws-course-card-bg,var(--cod-card-bg,#fff))!important}
/* Der nachgebaute Block erbt von irgendwo eine mittige Ausrichtung - die
Event- und Angebots-Kacheln stehen linksbuendig. Zwei Ausrichtungen in
derselben Liste fallen sofort auf. */
.codgw-source-embed--manual .cod-card,.codgw-source-embed--manual .cod-title,.codgw-source-embed--manual .cod-info-line,.codgw-source-embed--manual .cod-actions{text-align:left!important;justify-content:flex-start!important}
/* Der Inhalt trug einen Verlauf aus der allgemeinen .cod-card-Regel, waehrend
er bei der Event-Kachel einfarbig ist - nebeneinander sah die Karte
dadurch anders aus. Gemessen: dort rgb(253,252,250), hier ein
linear-gradient. Jetzt dieselbe Rolle wie ueberall. */
.codgw-source-embed--manual{background:transparent!important}
.codgw-card .codgw-source-embed--manual .cod-card{background:var(--cod-gws-manual-card-bg, var(--cod-card-bg,#fff))!important;background-image:none!important}
.codgw-source-embed--manual .codgw-giveaway-prize-title{color:var(--cod-gws-manual-title,var(--cod-title-color,#1f4166))!important}
.codgw-source-embed--manual .codgw-public{color:var(--cod-gws-manual-text,var(--codgw-text,#4d4d4d))!important}
.codgw-source-embed--manual,.codgw-card--sourced.codgw-source-embed--manual .codgw-content{background:var(--cod-gws-manual-card-bg,var(--cod-card-bg,#fff))!important}
.codgw-source-embed--manual .codgw-form button{background:var(--cod-gws-manual-btn-bg,var(--codgw-accent,#2563eb))!important;color:var(--cod-gws-manual-btn-color,var(--cod-text-on-dark,#fff))!important}
/* ── Trefferflächen für Touch (Bauplan, Abschnitt 8 und Kriterium 4) ──────────
Die Knöpfe der Karte sind 40 px hoch mal Kartenskalierung. Auf einer 340er
Karte (Fenster 360 px) sind das 37,8 px - unter den geforderten 44.
Abgetastet am 07.08.2026 VOR dieser Regel: "Zum Event" 81 x 38,
Gewinner-Knopf 81 x 42. Beide Male hat der Nutzer nichts gesehen, denn die
sichtbare Fläche wurde 5 von 5 mal getroffen - es fehlte nur das Band um
sie herum.
Die Fläche wird AUFGERECHNET, nie als Höhe reserviert: Ein Finger-Ziel ist
unsichtbar und darf das sichtbare Verhältnis der Karte nicht verstellen
(an der Angebote-Kachel hat genau das dem Bild ein Fünftel seiner Höhe
genommen). Deshalb ein Pseudo-Element statt min-height.
Nur senkrecht aufweiten: "Zum Event" und der Teilen-Knopf stehen
nebeneinander, waagerecht aufgeweitet würden sich ihre Flächen
überlappen und der falsche Knopf reagieren. */
@media (pointer: coarse) {
.codgw-card .cod-cta,
.codgw-card .codgw-giveaway-btn,
.codgw-card .codgw-winners-btn {
position: relative;
/* z-index am ELEMENT, nicht nur am Pseudo-Element: ohne eigenen
Stapelplatz bleibt die aufgeweitete Fläche unter dem Nachbarn, der
im Textfluss danach kommt. */
z-index: 2;
}
.codgw-card .cod-cta::after,
.codgw-card .codgw-giveaway-btn::after,
.codgw-card .codgw-winners-btn::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 100%;
min-height: 44px;
z-index: 2;
}
/* Der Teilen-Knopf skaliert seit dem 07.08.2026 mit der Karte und fällt
dabei auf einer 340er Karte von 46 auf 43,4 px - knapp unter die 44.
Er steht frei und wird deshalb allseitig aufgerechnet, nicht nur
senkrecht. Die 0,3 px je Seite reichen nicht an den Knopf daneben
heran (dazwischen liegt die Reihen-Lücke von 11,3 px). */
.codgw-card .cod-event-share-fab,
.codgw-card .angebot-share-fab {
position: relative;
z-index: 2;
}
.codgw-card .cod-event-share-fab::after,
.codgw-card .angebot-share-fab::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
min-width: 44px;
min-height: 44px;
z-index: 2;
}
}
/* Die Regel, die den Bildecken im Kartenbild den Radius nimmt, traf auch das
kleine Profilbild im Namensschild - dort soll es rund sein wie die Pille
drumherum. Ausdruecklich ausgenommen, mit genug Spezifitaet, um nach ihr
zu greifen. */
.codgw-card .codgw-image .codgw-creator-chip img,.codgw-card .cod-media .codgw-creator-chip img,.codgw-card .codgw-event-media-frame .codgw-creator-chip img,.codgw-card .angebot-image-wrap .codgw-creator-chip img,.codgw-source-embed .codgw-creator-chip img,.codgw-card .angebot-image-wrap .angebot-provider-chip img,.codgw-source-embed .angebot-provider-chip img,.codgw-card .cod-info-chip--medien > img{border-radius:999px!important}
/* Gleiche Breitenbasis fuer beide Knoepfe der Reihe. Bewusst mit doppelter Klasse
und am Dateiende: Der Teilen-Knopf traegt an mehreren Stellen ein eigenes flex,
und die letzte Regel mit gleicher Spezifitaet gewinnt. */
/* (ersetzt: die fit-content-Fassung verhinderte das Schrumpfen in eine Zeile) */
/* Knopfschrift wie in der echten Event- und Angebots-Karte: 16 px, Gewicht 400.
Die Gewinnspiel-Knoepfe standen auf 700 - fetter Text ist breiter, und genau
deshalb passten "Info & Anmeldung" und "Freunde einladen" hier nicht in eine
Zeile, waehrend sie es in der Event-Kachel tun (dort gemessen: 156 px Knopf). */
.codgw-card .cod-cta span,.codgw-card .cod-cta,.codgw-share-text{font-weight:var(--cod-gws-cta-weight, 400)!important}
/* Und sie stehen in EINER Reihe. Reicht der Platz nicht ganz, kuerzt der Text -
dasselbe Verhalten wie in der Event-Kachel auf dem Handy. */
.codgw-card .cod-actions{flex-wrap:nowrap!important}
.codgw-card .cod-actions .cod-cta.cod-cta,.codgw-card .cod-actions .cod-event-share-fab.cod-event-share-fab{flex:1 1 0!important;min-width:0!important}
.codgw-card .cod-actions .cod-cta span,.codgw-share-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Ohne min-width:0 gibt in einer Flex-Kette kein Element unter seiner Inhaltsbreite
nach - die Knopfreihe der Event-Kachel war dadurch 404 px breit in einer 365er
Karte und lief hinaus. Die Selbstheilung schrumpfte daraufhin die ganze Karte
(0,895 statt 1,015). Die Kette braucht die Angabe auf JEDER Ebene, nicht nur unten. */
.codgw-card .codgw-source-embed,.codgw-card .cod-card,.codgw-card .cod-card > .cod-row,.codgw-card .cod-actions,.codgw-card .angebot-actions,.codgw-card .angebot-content{min-width:0!important}
/* min-width:0 laesst ein Element schrumpfen, hindert es aber nicht am WACHSEN.
Die Knopfreihe der Event-Kachel stand auf 404 px in einer 365er Karte, weil ihr
Inhalt sie aufblies - erst ein Deckel zwingt die Knoepfe, sich den Platz zu teilen.
Ohne ihn schrumpft die Selbstheilung stattdessen die ganze Karte. */
.codgw-card .cod-actions,.codgw-card .angebot-actions,.codgw-card .cod-card > .cod-row,.codgw-card .cod-card,.codgw-card .codgw-source-embed{max-width:100%!important;box-sizing:border-box!important}
/* Eine Reihe, solange der Text vollstaendig hineinpasst - so wie es die
Event-Kachel auf dem Handy vormacht. Auf sehr schmalen Karten (bis 420 px
Fensterbreite) waeren "Info & Anmeldung" und "Freunde einladen" nebeneinander
nur noch abgeschnitten zu lesen; dort bricht die Reihe deshalb um. Abgeschnittene
Beschriftungen sind laut Regelwerk ein Fehler, kein Kompromiss. */
/* (ersetzt durch die Schlussregel zur Knopfreihe - der Umbruch gilt jetzt immer) */
/* Knopfschrift auf der Stufe "Winzig" der Schriftskala - dieselbe Stufe, die im
Elementor bei Events und Angeboten eingestellt ist. Bewusst ueber die Rolle
--cod-size-font-winzig statt mit einer eigenen Pixelzahl: Die wirkenden Groessen
stehen in der aktiven Vorlage, nicht im Code (dort sind nur Rueckfallwerte). */
.codgw-card .cod-cta,.codgw-card .cod-cta span,.codgw-card .cod-cta.cod-info,.codgw-share-text,.codgw-card .cod-event-share-fab,.codgw-card .angebot-share-fab{font-size: max(var(--cod-card-min-font, 13px), calc(var(--cod-size-font-winzig, 1rem) * var(--cod-card-ui-scale, 1)))!important}
/* Rand des Profilbildes im Namensschild in unserem Orange statt Weiss. */
.codgw-card .codgw-creator-chip img,.codgw-card .angebot-provider-chip img,.codgw-source-embed .codgw-creator-chip img,.codgw-source-embed .angebot-provider-chip img{border-color:var(--cod-color-star, #FFCD02)!important}
/* Fokus-Zustand aller Knoepfe der Karte. Nach einem Klick zeigte der
Gewinner-Knopf einen dunklen Rahmen und einen gelben Schimmer - beides kam
ungestaltet vom Browser bzw. aus einer fremden Fokus-Regel. Sichtbar bleiben
muss der Fokus (Tastaturbedienung), aber in unseren Farben und nur dann, wenn
wirklich per Tastatur navigiert wird. */
.codgw-card .codgw-winners-btn:focus,.codgw-card .codgw-giveaway-btn:focus,.codgw-card .cod-cta:focus,.codgw-card .cod-event-share-fab:focus,.codgw-card .angebot-share-fab:focus{outline:none!important;box-shadow:var(--codgw-shadow-action)!important}
.codgw-card .codgw-winners-btn:focus-visible,.codgw-card .codgw-giveaway-btn:focus-visible,.codgw-card .cod-cta:focus-visible,.codgw-card .cod-event-share-fab:focus-visible,.codgw-card .angebot-share-fab:focus-visible{outline:2px solid var(--cod-color-accent-blue, #fb4c95)!important;outline-offset:2px!important;box-shadow:var(--codgw-shadow-action)!important}
/* Und beim Draufdruecken kein fremder Rahmen. */
.codgw-card .codgw-winners-btn:active,.codgw-card .codgw-giveaway-btn:active{border:0!important;outline:none!important}
/* ================================================================
KNOPFREIHE - Schlussregel (11.08.2026)
Entscheidung: Beschriftungen werden NIE abgeschnitten. Passen zwei Knoepfe
nebeneinander, stehen sie nebeneinander; passen sie nicht, rutscht der zweite
darunter und nimmt die volle Breite. Vorher gab es beide Fehler nacheinander:
erst "Info & Anmel...", dann eine Karte, die dafuer als Ganzes schrumpfte.
Die drei Angaben gehoeren zusammen und duerfen nicht einzeln geaendert werden:
wrap - erlaubt den Umbruch, statt die Karte zu sprengen
fit-content - haelt den Knopf mindestens so breit wie seinen Text
max-width - haelt ihn zugleich innerhalb der Karte
================================================================ */
.codgw-card .cod-actions,.codgw-card .angebot-actions{flex-wrap:wrap!important}
.codgw-card .cod-actions .cod-cta.cod-cta,.codgw-card .cod-actions .cod-event-share-fab.cod-event-share-fab{flex:1 1 auto!important;min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important}
/* Kein Abschneiden: weder Ellipse noch verstecktes Ueberlaufen. */
.codgw-card .cod-actions .cod-cta span,.codgw-card .angebot-actions .cod-cta span,.codgw-share-text{overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;min-width:-moz-fit-content!important;min-width:fit-content!important}
/* Namensschild ohne Profilbild: Links braucht es dann eigenes Polster, und die
Hoehe darf nicht auf die Textzeile zusammenfallen - sonst ist es kein Schild
mehr, sondern ein Balken mit angeklebtem Namen. */
.codgw-creator-chip--ohne-bild{padding:0 calc(12px * var(--cod-card-ui-scale, 1))!important;min-height:calc(28px * var(--cod-card-ui-scale, 1))!important}
/* Alle Karten gleich hoch - ueber ALLE Zeilen hinweg, nicht nur innerhalb einer.
Ein Raster richtet jede Zeile fuer sich am hoechsten Element aus; sobald eine
Rubrik eine zweizeilige Knopfreihe hat (Event: "Info & Anmeldung" ueber
"Freunde einladen"), war ihre Zeile 608 px hoch und die naechste nur 556.
grid-auto-rows:1fr gibt jeder Zeile dieselbe Hoehe, die Karte fuellt sie aus.
Bewusst so und nicht ueber ein Schrumpfen der einzelnen Karte geloest: Gleiche
Hoehe hat Vorrang vor einer erzwungenen einzeiligen Knopfreihe (11.08.2026). */
.codgw-grid,.codgw-past-grid{grid-auto-rows:1fr!important;align-items:stretch!important}
.codgw-grid > .codgw-card,.codgw-past-grid > .codgw-card{height:100%!important}
/* Dieselbe Breitengrenze wie Angebot, Event und Partner-Karussell (12.08.2026).
Die Gewinnspielkarte war als einzige ungedeckelt und damit auf dem Handy
370 px breit, wo die drei anderen 302 px messen. Weil die Kartenskala
Breite/360 ist, hing daran die Knopfschrift: 16,4 gegen 13,4 px, obwohl alle
Regler auf "Winzig" stehen.
Die 88 px sind keine Willkür, sondern kommen vom Partner-Karussell: dessen
Owl-Element misst 100vw - 44, die Karte darin hat 22 px Rand je Seite. Wer
diese Zahl ändert, muss sie in angebote.css, events.css und im Partner-Widget
mitziehen - sonst laufen die vier Kartenarten wieder auseinander, und man
sieht es nur beim Wechsel zwischen den Bereichen.
Zentriert, weil die Karte damit schmaler ist als ihre Rasterspalte - ohne
die beiden margin-Zeilen klebt sie links und die gesparte Breite landet
komplett rechts. */
.codgw-grid > .codgw-card,.codgw-past-grid > .codgw-card{max-width:min(calc(100% - 12px), calc(100vw - 88px));margin-left:auto;margin-right:auto}
/* Und INNERHALB der Karte gilt keine fremde Breitengrenze (12.08.2026).
Die Angebots-Karte deckelt sich in ihrem eigenen Widget bei 360 px, damit sie
neben der Partner-Karte gleich breit steht. In einer Gewinnspielkarte ist das
falsch: Dort gibt die Gewinnspielkarte die Breite vor, und sobald die
Rasterspalte breiter als 372 px wird, bliebe ausgerechnet die Angebots-Rubrik
zurück - sichtbar als eine schmalere Kachel zwischen zwei breiten.
Auf dem Prüfstand fällt das nicht auf, weil der Elementor-Container dort bei
365 px deckelt und die Grenze nie erreicht wird; auf einem breiteren Bildschirm
schon. Deshalb die Regel, auch wenn sie hier nichts ändert. */
.codgw-card .angebot-card,
.codgw-card .cod-card,
.codgw-card .codgw-source-embed > *{max-width:100%!important}
/* Jede Karte füllt ihre Rasterspalte AUS. Gemessen bei verbreitertem Rahmen:
Online Kurs, Partner und Individuell standen auf 540 px, das Event auf 452 und
das Angebot auf 356 - in derselben Zeile, bei gleich breiten Spalten. Die
Karten mit eingebetteter Quelle richteten sich nach ihrem Inhalt statt nach
der Spalte; max-width allein genügt dagegen nicht, denn sie erlaubt nur eine
Breite, sie fordert keine. */
.codgw-grid > .codgw-card,.codgw-past-grid > .codgw-card{width:100%}
/* ... aber grid-auto-rows wirkt nur INNERHALB eines Rasters, und laufende und
gezogene Gewinnspiele stehen in zwei getrennten (.codgw-grid und
.codgw-past-grid, weil die vergangenen aufklappbar sind). Steht in einem
davon nur eine einzige Karte, bekommt sie ihre natuerliche Hoehe und faellt
gegen die andere Gruppe ab - gemessen 556 gegen 583 px, obwohl innerhalb
jeder Gruppe alles stimmte. Die gemeinsame Untergrenze setzt deshalb das
Widget-JS (hoehenAngleichen) auf den Rahmen; ohne JS bleibt es beim alten
Verhalten statt bei einer geratenen festen Hoehe. */
.codgw-grid > .codgw-card,.codgw-past-grid > .codgw-card{min-height:var(--codgw-karte-min,0)!important}
/* ================================================================
GEWINNSPIEL-KNOEPFE = ANGEBOTS-KNOEPFE (11.08.2026)
Dieselbe Rollen-Kette wie in events.css, damit alle drei Kartenarten
an denselben Reglern haengen. Werte abzuschreiben genuegt nicht - sie
muessen an den ROLLEN haengen, sonst laufen sie beim naechsten
Dashboard-Regler wieder auseinander.
Button 1 = --cod-btn-angebot-*, Button 2 = --cod-btn-event-*.
Das seitliche Polster ist fest 12 px, weil es das am Angebot ebenfalls ist.
================================================================ */
.codgw-card .cod-actions .cod-cta.cod-cta,
.codgw-card .angebot-actions .cod-cta.cod-cta,
.codgw-card .cod-actions .cod-event-share-fab.cod-event-share-fab{
gap: var(--cod-angebot-luft, 8px) !important;
padding: 0 var(--cod-angebot-rand, 12px) !important;
background: var(--cod-btn-angebot-bg, var(--cod-cta, #51B36F)) !important;
background-image: none !important;
color: var(--cod-btn-angebot-color, #fff) !important;
border: var(--cod-btn-angebot-border-width, 0px) solid var(--cod-btn-angebot-border-color, transparent) !important;
border-radius: var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px)) !important;
/* KEINE font-family hier: Die Schriftart kommt aus dem Elementor-Regler des
Widgets, der sie mit !important direkt setzt ("Arial Rounded MT Bold").
Eine eigene Regel auf die Rolle --cod-font-btn-angebot hat ihn ueberschrieben -
und die Rolle steht auf "Regular". Ergebnis war ein duennerer Knopf bei der
Angebots-Variante, waehrend alle anderen dem Regler folgten. */
font-size: max(var(--cod-card-min-font, 13px), calc(var(--cod-font-btn-angebot-size, 14px) * var(--cod-card-ui-scale, 1))) !important;
font-weight: var(--cod-font-btn-angebot-weight, 700) !important;
box-shadow: none !important;
}
/* Zweiter Knopf: Teilen bzw. "Freunde einladen" - wie "Termin buchen" beim Angebot. */
.codgw-card .cod-actions .cod-cta.secondary,
.codgw-card .cod-actions .cod-event-share-fab.cod-event-share-fab,
.codgw-card .angebot-actions .cod-cta.secondary{
background: var(--cod-btn-event-bg, var(--cod-cta2, #2b86c5)) !important;
background-image: none !important;
color: var(--cod-btn-event-color, #fff) !important;
border: var(--cod-btn-event-border-width, 0px) solid var(--cod-btn-event-border-color, transparent) !important;
border-radius: var(--cod-btn-event-border-radius, var(--cod-button-radius, 6px)) !important;
}
.codgw-card .cod-actions .cod-cta.secondary:hover,
.codgw-card .cod-actions .cod-event-share-fab:hover,
.codgw-card .angebot-actions .cod-cta.secondary:hover{
color: var(--cod-btn-event-hover-color, #fff) !important;
background: var(--cod-btn-event-hover-bg, var(--cod-btn-event-bg, var(--cod-cta2, #2b86c5))) !important;
border-color: var(--cod-btn-event-hover-border-color, var(--cod-btn-event-border-color, transparent)) !important;
}
/* Das Teilen-Symbol folgt der Textfarbe des Knopfes, in dem es sitzt. */
.codgw-card .cod-actions .cod-event-share-fab::before{
background-color: currentColor !important;
}
/* Primaerer Knopf traegt ueberall dieselbe Schriftart. Gemessen: Event, Partner,
Kurs und Individuell nutzen "Arial Rounded MT Bold", die Angebots-Variante als
einzige "Regular" - dadurch wirkte sie duenner, obwohl das Gewicht (400) in
allen gleich ist. Die Familie kommt aus --cod-font-btn-angebot; die Regel der
Angebots-Kachel war spezifischer und hat sie ueberschrieben. */
/* (entfernt: hat den Elementor-Regler ueberschrieben) */
/* Eine leere Ortszeile zeigt nur ihr Symbol - das sieht aus wie ein fehlender
Wert und ist keiner. Liefert die Quelle keinen Ort, faellt die Zeile weg.
:has() bewusst als EIGENE Regel, nie in einer Selektor-Liste: In Firefox unter
121 wuerde sonst die ganze Liste ungueltig (Browser-Baseline). */
.codgw-card .cod-info-line:has(.cod-place:empty){display:none!important}
.codgw-card .cod-place:empty{display:none!important}
/* Kein Teilen-Symbol in den beschrifteten Knoepfen der Gewinnspiel-Karte
(11.08.2026, fuer alle Rubriken so entschieden). Bei "Freunde einladen" war es
zugleich die Loesung fuer den Zweizeiler: Beide Beschriftungen brauchten
zusammen nur rund 6 px mehr als die Reihe breit ist, das Symbol samt Luecke
misst 30 - ohne es passen sie nebeneinander.
Der Teilen-Knopf der Angebots-Quelle behaelt sein Symbol: Er sitzt IM BILD und
traegt dort keine Beschriftung - ohne Symbol waere er leer. */
.codgw-card .cod-actions .cod-event-share-fab::before{display:none!important}
.codgw-card .cod-actions .cod-event-share-fab{gap:0!important}
/* 1) Bildecken oben auch bei der Angebots-Quelle runden. Gemessen: Angebot 0 px,
alle anderen Rubriken 14,21 - die Karte fiel dadurch aus der Reihe. */
.codgw-card .angebot-image-wrap{
border-top-left-radius: var(--codgw-bild-radius, 14px) !important;
border-top-right-radius: var(--codgw-bild-radius, 14px) !important;
overflow: hidden !important;
}
/* 2) Keine Symbole mehr vor Ort und Zeit in der Event-Kachel (11.08.2026). */
.codgw-card .cod-place .codgw-line-icon,
.codgw-card .codgw-event-date-line .codgw-line-icon,
.codgw-card .cod-info-line .codgw-line-icon{display:none!important}
/* 3) Beschreibungstext in ALLEN Rubriken gleich: Groesse, Schrift, Farbe.
Gemessen waren 16 px bei Event und Angebot gegen 16,24 bei den uebrigen -
die einen skaliert mit der Karte, die anderen fest. Jetzt alle skaliert. */
.codgw-card .codgw-manual-text,
.codgw-card .angebot-location-meta,
.codgw-card .angebot-location-name,
.codgw-card .cod-info-line,
.codgw-card .cod-place,
.codgw-card .codgw-line-text{
font-size: max(var(--cod-card-min-font, 13px), calc(16px * var(--cod-card-ui-scale, 1))) !important;
font-weight: 400 !important;
color: var(--cod-color-text, #4d4d4d) !important;
}
/* Teilen-Knopf sitzt in JEDER Rubrik im Bild unten rechts - genau wie ihn die
Angebots-Quelle setzt (11.08.2026 so entschieden). Masse vom Vorbild
abgenommen: 41x41, 10 px von rechts und unten, Radius 8, Rand 2 px, weisser
Grund, blaues Symbol. Im Bild traegt er KEINE Beschriftung - dort spricht das
Symbol, deshalb ist es hier ausdruecklich wieder sichtbar. */
.codgw-card .codgw-share-im-bild{
position: absolute !important;
right: calc(16px * var(--cod-card-ui-scale, 1)) !important;
bottom: calc(16px * var(--cod-card-ui-scale, 1)) !important;
left: auto !important; top: auto !important;
width: calc(40px * var(--cod-card-ui-scale, 1)) !important;
height: calc(40px * var(--cod-card-ui-scale, 1)) !important;
min-height: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
z-index: 3 !important;
}
.codgw-card .codgw-share-im-bild::before{display:block!important}
/* Bleibt nach dem Verschieben des Teilen-Knopfs nur EIN Knopf in der Reihe,
nimmt er die volle Breite - sonst klebt er rechts und die Karte wirkt schief. */
.codgw-card .cod-actions > .cod-cta:only-child{flex:1 1 100%!important;width:100%!important}
/* Farben des Teilen-Knopfs im Bild: weiss mit blauem Rand, blaues Symbol -
dieselben Rollen wie beim Vorbild aus der Angebots-Karte. Ohne diese Zeilen
erbt er die Fuellung des Knopfes, aus dem er kommt (beim Partner dunkel). */
.codgw-card .codgw-share-im-bild{
background: var(--cod-btn-secondary-bg, #ffffff) !important;
background-image: none !important;
color: var(--cod-btn-secondary-text, #3598DB) !important;
border: 2px solid var(--cod-btn-secondary-border, var(--cod-btn-secondary-text, #3598DB)) !important;
border-radius: var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px)) !important;
box-shadow: none !important;
}
.codgw-card .codgw-share-im-bild::before{background-color: currentColor !important}
/* Die Knopfreihe nimmt immer die volle Breite. Seit der Teilen-Knopf ins Bild
gewandert ist, blieb nur ein Knopf uebrig - und die Reihe schrumpfte auf
dessen Breite (gemessen 200 statt 333 px), wodurch er links klebte. Ein
flex:1 1 100% am Knopf half nicht: Er fuellte brav seine Reihe aus, nur war
die zu schmal. */
.codgw-card .cod-actions,
.codgw-card .angebot-actions{width:100%!important;align-self:stretch!important}
/* Der Teilen-Knopf in der REIHE traegt sein Wort und kein Symbol; der KLON im
Bild traegt das Symbol und kein Wort. Beide sind derselbe Knopf, nur an zwei
Stellen - deshalb hier getrennt gesteuert. */
.codgw-card .cod-actions .cod-event-share-fab:not(.codgw-share-im-bild){position:static!important;width:auto!important;height:auto!important;min-height:calc(40px * var(--cod-card-ui-scale, 1))!important;flex:1 1 auto!important}
/* Auch der Teilen-Knopf der Angebots-Quelle bekommt denselben Abstand - er sass
als Vorbild ebenfalls in der Rundung, nur faellt es dort auf dunklem Bild
weniger auf. */
.codgw-card .angebot-image-wrap .angebot-share-fab{right:calc(16px * var(--cod-card-ui-scale, 1))!important;bottom:calc(16px * var(--cod-card-ui-scale, 1))!important}
/* Der Klon im Bild muss selbst zentrieren. Gemessen: Event und Angebot standen
auf display:flex mit align/justify center, die drei kopierten Knoepfe auf
display:block - ihr Symbol klebte dadurch oben links und wirkte kleiner,
obwohl es mit 22,33 px ueberall gleich gross ist. Die Eigenschaft kam bei
Event und Angebot aus der jeweiligen Quelle; der Klon erbt sie nicht. */
.codgw-card .codgw-share-im-bild{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 0 !important;
}
/* Teilnehmen-Knopf in Orange - MUSS nach der allgemeinen Rollen-Kette stehen.
Die Kette faerbt jeden .cod-cta mit --cod-btn-angebot-bg (Rueckfall gruen);
der Teilnehmen-Knopf traegt diese Klasse ebenfalls und wurde dadurch wieder
gruen, obwohl seine eigene Regel weiter oben stand. Aufgefallen erst beim
Nachstellen eines LAUFENDEN Gewinnspiels - an gezogenen Verlosungen ist der
Knopf ausgeblendet und der Fehler unsichtbar (QA-Durchsicht 11.08.2026). */
.codgw-card .codgw-giveaway-btn,
.codgw-card .cod-actions .codgw-giveaway-btn,
.codgw-card .codgw-open-modal{
background: var(--cod-gws-teilnehmen-bg, var(--cod-color-star, #FFCD02)) !important;
background-image: none !important;
color: var(--cod-gws-teilnehmen-color, var(--codgw-title, #1f4166)) !important;
}