/*
 * CIS Gratisgeschenke – Bereich „Ihr Geschenk“ im Warenkorb und Seitenpanel.
 * Abgenommen als Fassung „Fächer“ (design-labor/cis-free-gift-auswahl.html, 02.10.2026).
 *
 * Farben und Schriften kommen vom Theme: Akzent aus WoodMart bzw. dem Elementor-Kit,
 * alle Grautöne aus der Schriftfarbe (currentColor) – damit passt es auf dunklen und
 * hellen Seiten. Eigene Werte lassen sich über die Variablen --cfg-akzent und
 * --cfg-auf-akzent setzen.
 *
 * Jede Regel beginnt mit .cfg-ui, damit sie gegen Theme-Regeln wie
 * „.entry-content h2“ oder „button“ gewinnt, ohne !important.
 */

.cfg-ui {
	--cfg-akzent: var(--wd-primary-color, var(--e-global-color-accent, #bb9a4e));
	--cfg-auf-akzent: #1b1b1b;   /* Schrift auf der Akzentfläche – bei dunklem Akzent auf #fff setzen */
	--cfg-akzent-text: color-mix(in srgb, var(--cfg-akzent) 78%, currentColor); /* Akzent als Schrift: heller auf Dunkel, dunkler auf Hell */
	--cfg-linie: color-mix(in srgb, currentColor 14%, transparent);
	--cfg-linie-stark: color-mix(in srgb, currentColor 26%, transparent);
	--cfg-flaeche: color-mix(in srgb, currentColor 4.5%, transparent);
	--cfg-text-2: color-mix(in srgb, currentColor 74%, transparent);
	--cfg-text-3: color-mix(in srgb, currentColor 60%, transparent);
	--cfg-radius: var(--wd-brd-radius, 5px);
	--cfg-titel-font: var(--wd-title-font, inherit);
	--cfg-ease: cubic-bezier(.23, 1, .32, 1);
	--cfg-drawer: cubic-bezier(.32, .72, 0, 1);
}

/* Schrift auf der Akzentfläche automatisch: hell auf dunklem Akzent, dunkel auf hellem.
   Relative Farbsyntax – Helligkeit L unter 0,62 wird zu fast Weiß, darüber zu fast Schwarz. */
@supports (color: oklch(from red l c h)) {
	.cfg-ui { --cfg-auf-akzent: oklch(from var(--cfg-akzent) clamp(0.2, (0.62 - l) * 1000, 0.99) 0 0); }
}

.cfg-ui *,
.cfg-ui *::before,
.cfg-ui *::after { box-sizing: border-box; }
.cfg-ui svg { flex: none; width: 1em; height: 1em; }

/* ---------- Überschrift, Knöpfe, Zähler ---------- */

.cfg-ui .cfg-titel { margin: 0 0 6px; padding: 0; color: inherit; font: 600 18px/1.3 var(--cfg-titel-font); letter-spacing: .01em; text-transform: uppercase; }
.cfg-ui .cfg-lead { margin: 0; color: var(--cfg-text-2); font-size: 16px; line-height: 1.5; text-wrap: pretty; }

.cfg-ui .cfg-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 18px; border: 2px solid var(--cfg-akzent); border-radius: var(--cfg-radius); background: transparent; box-shadow: none; color: var(--cfg-akzent-text); font: 600 13px/1 var(--cfg-titel-font); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: transform 160ms var(--cfg-ease), background-color 150ms ease, color 150ms ease, border-color 150ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cfg-ui .cfg-knopf:active:not(:disabled) { transform: scale(.97); }
.cfg-ui .cfg-knopf:disabled { border-color: var(--cfg-linie-stark); color: var(--cfg-text-3); cursor: not-allowed; }
.cfg-ui .cfg-knopf--voll { background: var(--cfg-akzent); color: var(--cfg-auf-akzent); }
.cfg-ui .cfg-knopf--breit { width: 100%; }
/* Themes färben Buttons bei :focus und :active gern ein (Elementor-Kit, WoodMart) – unsere behalten ihre Farben. */
.cfg-ui .cfg-knopf:is(:focus, :active) { border-color: var(--cfg-akzent); background: transparent; box-shadow: none; color: var(--cfg-akzent-text); }
.cfg-ui .cfg-knopf--voll:is(:focus, :active) { background: var(--cfg-akzent); color: var(--cfg-auf-akzent); }
@media (hover: hover) and (pointer: fine) {
	.cfg-ui .cfg-knopf:hover:not(:disabled) { background: var(--cfg-akzent); color: var(--cfg-auf-akzent); }
	.cfg-ui .cfg-knopf--voll:hover:not(:disabled) { background: color-mix(in srgb, var(--cfg-akzent) 88%, #fff); }
}

.cfg-ui .cfg-zaehler { display: inline-flex; align-items: stretch; height: 40px; border-radius: var(--cfg-radius); background: var(--cfg-akzent); color: var(--cfg-auf-akzent); }
.cfg-ui .cfg-zaehler button { display: grid; place-items: center; width: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--cfg-radius); background: transparent; box-shadow: none; color: inherit; font-size: 16px; cursor: pointer; transition: transform 160ms var(--cfg-ease), opacity 150ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cfg-ui .cfg-zaehler button:is(:hover, :focus, :active) { background: transparent; box-shadow: none; color: inherit; }
.cfg-ui .cfg-zaehler button:active:not(:disabled) { transform: scale(.9); }
.cfg-ui .cfg-zaehler button:disabled { opacity: .35; cursor: not-allowed; }
.cfg-ui .cfg-zaehler output { display: grid; place-items: center; min-width: 22px; font: 600 15px/1 var(--cfg-titel-font); font-variant-numeric: tabular-nums; }

.cfg-ui .cfg-knopf:focus-visible,
.cfg-ui .cfg-zaehler button:focus-visible,
.cfg-ui .cfg-gfach__auf:focus-visible,
.cfg-ui .cfg-gfach__weg:focus-visible,
.cfg-ui .cfg-ablage__zu:focus-visible { outline: 2px solid var(--cfg-akzent-text); outline-offset: 2px; }

/* ---------- Preis „Gratis statt …“, Marke, Menge (auch in der Tabelle) ---------- */

.cfg-ui.cfg-preis { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.cfg-ui .cfg-gratis { color: var(--cfg-akzent-text); font-family: var(--cfg-titel-font); font-weight: 600; }
.cfg-ui .cfg-statt { color: var(--cfg-text-3); }
.cfg-ui .cfg-statt del { text-decoration-thickness: 1px; }
.cfg-ui .cfg-statt .amount { color: inherit; font-weight: inherit; }

.cfg-ui.cfg-marke { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 0 10px; padding: 3px 8px 3px 7px; border-radius: 4px; background: var(--cfg-akzent); color: var(--cfg-auf-akzent); font: 600 11px/1.2 var(--cfg-titel-font); letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; }
.cfg-ui.cfg-menge { font-variant-numeric: tabular-nums; }

/* ---------- Stand und Fortschritt ---------- */

.cfg-ui .cfg-stand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cfg-ui .cfg-chip { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--cfg-titel-font); }
.cfg-ui .cfg-chip svg { color: var(--cfg-akzent-text); font-size: 18px; }
.cfg-ui .cfg-noch { color: var(--cfg-text-2); font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.cfg-ui .cfg-noch strong { color: var(--wd-text-color, currentColor); font-weight: 600; }
.cfg-ui .cfg-balken { position: relative; height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
.cfg-ui .cfg-balken i { position: absolute; inset: 0; border-radius: inherit; background: var(--cfg-akzent); transform-origin: left center; transition: transform 380ms var(--cfg-ease); }

/* ---------- Bereich unter der Tabelle ---------- */

.cfg-ui.cfg-gross { display: grid; gap: 22px; margin: 30px 0 0; padding: 28px; border: 3px solid var(--brdcolor-gray-200, var(--cfg-linie)); border-radius: var(--cfg-radius); text-align: left; }
.cfg-ui .cfg-gross__kopf { display: grid; gap: 4px; }
.cfg-ui .cfg-gross__stand { display: grid; gap: 10px; }
.cfg-ui .cfg-gross__fuss { display: flex; }

.cfg-ui .cfg-gfaecher { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cfg-ui .cfg-gfach { position: relative; width: 136px; margin: 0; padding: 0; list-style: none; }
.cfg-ui .cfg-gfach::before { content: none; }
/* Themes zentrieren gern den Inhalt jedes Buttons – hier muss die Spalte voll breit sein. */
.cfg-ui .cfg-gfach__auf { display: grid; grid-template-columns: 100%; justify-content: stretch; gap: 10px; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--cfg-radius); background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cfg-ui .cfg-gfach__flaeche { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border: 2px dashed var(--cfg-akzent); border-radius: var(--cfg-radius); color: var(--cfg-akzent-text); font-size: 30px; transition: transform 160ms var(--cfg-ease), background-color 150ms ease; }
.cfg-ui .cfg-gfach__auf { white-space: normal; } /* Themes geben Buttons gern nowrap – die Namen im Fach sollen umbrechen */
.cfg-ui .cfg-gfach__auf:is(:hover, :focus, :active) { background: none; box-shadow: none; color: inherit; }
.cfg-ui .cfg-gfach__auf:active .cfg-gfach__flaeche { transform: scale(.97); }
.cfg-ui .cfg-gfach.is-voll .cfg-gfach__flaeche { border-style: solid; background: #fff; }
.cfg-ui .cfg-gfach.is-voll img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.cfg-ui .cfg-gfach.is-zu .cfg-gfach__flaeche { border-color: var(--cfg-linie-stark); color: var(--cfg-text-3); font-size: 22px; }
.cfg-ui .cfg-gfach.is-zu .cfg-gfach__auf { cursor: default; }
.cfg-ui .cfg-gfach__betrag { font: 600 15px/1 var(--cfg-titel-font); font-variant-numeric: tabular-nums; }
/* Lange Namen („Weihnachtlicher“ in einem Handy-Fach) trennen statt abschneiden. */
.cfg-ui .cfg-gfach__name { display: -webkit-box; overflow: hidden; font: 500 14px/1.35 var(--cfg-titel-font); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; hyphens: auto; }
.cfg-ui .cfg-gfach.is-frei .cfg-gfach__name { color: var(--cfg-akzent-text); }
.cfg-ui .cfg-gfach.is-zu .cfg-gfach__name { color: var(--cfg-text-3); font-family: inherit; font-weight: 400; }
.cfg-ui .cfg-gfach__weg { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(20, 20, 20, .72); box-shadow: none; color: #fff; font-size: 14px; cursor: pointer; transition: transform 160ms var(--cfg-ease), background-color 150ms ease; }
.cfg-ui .cfg-gfach__weg:is(:focus, :active) { background: rgba(20, 20, 20, .72); box-shadow: none; color: #fff; }
.cfg-ui .cfg-gfach__weg:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
	.cfg-ui .cfg-gfach.is-frei .cfg-gfach__auf:hover .cfg-gfach__flaeche { background: color-mix(in srgb, var(--cfg-akzent) 12%, transparent); }
	.cfg-ui .cfg-gfach__weg:hover { background: rgba(20, 20, 20, .9); }
}
@media (max-width: 768.98px) {
	.cfg-ui.cfg-gross { padding: 20px; }
	.cfg-ui .cfg-gfaecher { gap: 12px; }
	.cfg-ui .cfg-gfach { width: calc((100% - 24px) / 3); }
	.cfg-ui .cfg-gross__fuss .cfg-knopf { width: 100%; }
}

/* ---------- Seitenpanel ---------- */

.cfg-ui.cfg-ablage { position: fixed; inset: 0; z-index: 100000; color: var(--wd-text-color, inherit); pointer-events: none; }
.cfg-ui.cfg-ablage[data-offen] { pointer-events: auto; }
.cfg-ui .cfg-ablage__schleier { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity 200ms ease-out; }
.cfg-ui.cfg-ablage[data-offen] .cfg-ablage__schleier { opacity: 1; transition-duration: 300ms; }
.cfg-ui .cfg-ablage__blatt { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 100vw); background: var(--cfg-panel, var(--bgcolor-white, #fff)); box-shadow: -12px 0 32px rgba(0, 0, 0, .35); outline: none; transform: translateX(100%); visibility: hidden; transition: transform 200ms ease-out, visibility 0s linear 200ms; }
.cfg-ui.cfg-ablage[data-offen] .cfg-ablage__blatt { transform: none; visibility: visible; transition: transform 320ms var(--cfg-drawer), visibility 0s; }
.cfg-ui .cfg-ablage__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--cfg-linie); }
.cfg-ui .cfg-ablage__kopf h2 { margin: 0; padding: 0; color: inherit; font: 600 16px/1.3 var(--cfg-titel-font); text-transform: uppercase; }
.cfg-ui .cfg-ablage__zu { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: -8px -10px -8px 0; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--cfg-text-2); font-size: 22px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.cfg-ui .cfg-ablage__zu:is(:focus, :active) { background: transparent; box-shadow: none; color: var(--cfg-text-2); }
.cfg-ui .cfg-ablage__zu:hover { background: var(--cfg-flaeche); color: inherit; }
.cfg-ui .cfg-ablage__inhalt { display: flex; flex: 1; flex-direction: column; min-height: 0; transition: opacity 150ms ease; }
.cfg-ui .cfg-ablage__inhalt[aria-busy="true"] { opacity: .6; }
.cfg-ui .cfg-ablage__stand { display: grid; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--cfg-linie); }
.cfg-ui .cfg-ablage__liste { flex: 1; margin: 0; padding: 6px 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.cfg-ui .cfg-listzeile { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0; padding: 10px 20px; list-style: none; transition: background-color 150ms ease; }
.cfg-ui .cfg-listzeile::before { content: none; }
.cfg-ui .cfg-listzeile.is-gewaehlt { background: color-mix(in srgb, var(--cfg-akzent) 10%, transparent); }
.cfg-ui .cfg-listzeile__bild { display: block; width: 52px; height: 65px; overflow: hidden; border-radius: 4px; background: #fff; }
.cfg-ui .cfg-listzeile__bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.cfg-ui .cfg-listzeile__text { display: grid; gap: 3px; min-width: 0; }
.cfg-ui .cfg-listzeile__name { font: 500 15px/1.3 var(--cfg-titel-font); }
.cfg-ui .cfg-listzeile .cfg-preis { font-size: 14px; }
.cfg-ui .cfg-listzeile .cfg-knopf { min-width: 104px; }
.cfg-ui .cfg-listzeile__aktion { display: flex; justify-content: flex-end; }
/* Beides steht im Markup – sichtbar ist je nach Stand eines (das Skript schaltet beim Klick sofort um). */
.cfg-ui .cfg-listzeile:not(.is-gewaehlt) .cfg-zaehler,
.cfg-ui .cfg-listzeile.is-gewaehlt .cfg-waehlen { display: none; }
.cfg-ui .cfg-ab { display: inline-grid; place-items: center; min-height: 40px; padding: 0 12px; border: 1px dashed var(--cfg-linie-stark); border-radius: var(--cfg-radius); color: var(--cfg-text-3); font: 500 13px/1 var(--cfg-titel-font); white-space: nowrap; }
.cfg-ui .cfg-ablage__meldung { margin: 0; padding: 12px 20px; border-top: 1px solid var(--cfg-linie); color: inherit; font-size: 14px; line-height: 1.4; }
.cfg-ui .cfg-ablage__fuss { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cfg-linie); }

/* Seite hinter dem offenen Panel steht still */
html.cfg-panel-offen { overflow: hidden; }

/* ---------- Einmaliger Auftritt des gerade gewählten Geschenks ---------- */

@keyframes cfg-plopp { from { opacity: 0; transform: scale(.85); } }
.cfg-ui .cfg-gfach.cfg-neu .cfg-gfach__flaeche img { animation: cfg-plopp 200ms var(--cfg-ease) both; }

@media (prefers-reduced-motion: reduce) {
	.cfg-ui .cfg-ablage__blatt,
	.cfg-ui.cfg-ablage[data-offen] .cfg-ablage__blatt { transform: none; transition: opacity 150ms ease, visibility 0s; }
	.cfg-ui.cfg-ablage:not([data-offen]) .cfg-ablage__blatt { opacity: 0; }
	@keyframes cfg-ein { from { opacity: 0; } }
	.cfg-ui .cfg-gfach.cfg-neu .cfg-gfach__flaeche img { animation-name: cfg-ein; }
	.cfg-ui .cfg-balken i { transition: none; }
}