/* technika_konfigurator — „Kunden kauften auch“ (übernimmt FORGE-Tokens --fg-*, sonst eigene Werte) */
.tkk-bundle {
    --tb-bg: var(--fg-surface, #111515);
    --tb-bg-2: var(--fg-surface-2, #151a1a);
    --tb-line: var(--fg-line, rgba(255, 255, 255, .08));
    --tb-line-strong: var(--fg-line-strong, rgba(255, 255, 255, .16));
    --tb-text: var(--fg-text, #eef1ef);
    --tb-text-2: var(--fg-text-2, #c9cfcc);
    --tb-muted: var(--fg-muted, #949e9b);
    --tb-accent: var(--fg-lime, #c6f432);
    --tb-accent-hi: var(--fg-lime-hi, #d7ff5f);
    --tb-accent-ink: var(--fg-lime-ink, #0b1004);
    --tb-accent-a10: var(--fg-lime-a10, rgba(198, 244, 50, .10));
    --tb-accent-a20: var(--fg-lime-a20, rgba(198, 244, 50, .20));
    --tb-danger: var(--fg-danger, #ff5d61);
    --tb-radius: var(--fg-radius, 12px);
    --tb-radius-lg: var(--fg-radius-lg, 18px);
    color: var(--tb-text);
    font-family: var(--fg-font, inherit);
}
.tkk-bundle *, .tkk-bundle *::before, .tkk-bundle *::after { box-sizing: border-box; }
.tkk-bundle :where(h2, p, ol, li) { margin: 0; padding: 0; }
.tkk-bundle :where(ol) { list-style: none; }

.tkk-bundle__head { margin-bottom: 22px; }
.tkk-bundle__kicker { display: block; color: var(--tb-accent); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tkk-bundle__title { margin-top: 6px; font-family: var(--fg-display, inherit); font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; line-height: 1.15; color: var(--tb-text); }
.tkk-bundle__text { margin-top: 8px; color: var(--tb-muted); font-size: 15px; }

.tkk-bundle__body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 20px; align-items: stretch;
    padding: 20px; border: 1px solid var(--tb-line); border-radius: var(--tb-radius-lg); background: var(--tb-bg);
}
.tkk-bundle__items { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.tkk-bundle__item {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px;
    padding: 14px; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); background: var(--tb-bg-2);
    transition: opacity .25s, border-color .25s;
}
/* Aktueller Artikel: deutlich hervorgehoben (Rahmen + Glow, getönt, etwas breiter, Badge auf der Oberkante) */
.tkk-bundle__items { padding-top: 12px; }
.tkk-bundle__item.is-current {
    flex-grow: 1.22; border: 1.5px solid var(--tb-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tb-accent) 11%, var(--tb-bg-2)) 0%, var(--tb-bg-2) 62%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tb-accent) 35%, transparent), 0 22px 46px -22px color-mix(in srgb, var(--tb-accent) 55%, transparent);
}
.tkk-bundle__item.is-current .tkk-bundle__name { color: var(--tb-text); font-size: 15px; }
.tkk-bundle__item.is-current .tkk-bundle__price { color: var(--tb-accent); font-size: 18px; }
.tkk-bundle__item.is-off { opacity: .45; }
.tkk-bundle__plus {
    flex: none; align-self: center; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--tb-accent-a10); color: var(--tb-accent); font-weight: 700; font-size: 18px;
}
.tkk-bundle__check { position: absolute; top: 10px; left: 10px; z-index: 2; cursor: pointer; }
.tkk-bundle__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tkk-bundle__box {
    display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px;
    border: 2px solid var(--tb-line-strong); background: var(--tb-bg); color: transparent; transition: background .2s, border-color .2s;
}
.tkk-bundle__box svg { width: 14px; height: 14px; }
.tkk-bundle__check input:checked + .tkk-bundle__box { background: var(--tb-accent); border-color: var(--tb-accent); color: var(--tb-accent-ink); }
.tkk-bundle__check input:focus-visible + .tkk-bundle__box { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.tkk-bundle__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tkk-bundle__media {
    display: flex; align-items: center; justify-content: center; height: 120px; padding: 10px; border-radius: 10px;
    background: radial-gradient(90% 80% at 50% 40%, #f7f8f7, #e3e7e4);
}
.tkk-bundle__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tkk-bundle__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tkk-bundle__this {
    position: absolute; top: -12px; left: 50%; z-index: 3; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; white-space: nowrap;
    background: var(--tb-accent); color: var(--tb-accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tb-accent) 70%, transparent);
}
.tkk-bundle__this svg { width: 14px; height: 14px; }
.tkk-bundle__name {
    color: var(--tb-text); font-weight: 600; font-size: 14px; line-height: 1.3; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.tkk-bundle__name:hover { color: var(--tb-accent); }
.tkk-bundle__sub { color: var(--tb-muted); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tkk-bundle__price { margin-top: auto; padding-top: 4px; color: var(--tb-text); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.tkk-bundle__price s { color: var(--tb-muted); font-weight: 400; font-size: 13px; }

.tkk-bundle__sum {
    display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px;
    border-radius: var(--tb-radius); background: var(--tb-accent-a10); border: 1px solid var(--tb-accent-a20);
}
.tkk-bundle__sum-label { color: var(--tb-text-2); font-size: 14px; }
.tkk-bundle__sum-label strong { color: var(--tb-text); }
.tkk-bundle__total { font-family: var(--fg-display, inherit); font-size: clamp(26px, 2.2vw, 34px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tkk-bundle__vat { color: var(--tb-muted); font-size: 12px; }
.tkk-bundle__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 8px;
    padding: 0 18px; border: 0; border-radius: 10px; background: var(--tb-accent); color: var(--tb-accent-ink);
    font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s, box-shadow .2s, transform .15s;
}
.tkk-bundle__btn svg { width: 19px; height: 19px; }
.tkk-bundle__btn:hover:not(:disabled) { background: var(--tb-accent-hi); box-shadow: 0 10px 30px -12px rgba(198, 244, 50, .45); }
.tkk-bundle__btn:active:not(:disabled) { transform: translateY(1px); }
.tkk-bundle__btn:disabled { opacity: .5; cursor: not-allowed; }
.tkk-bundle.is-busy .tkk-bundle__btn { cursor: progress; }
.tkk-bundle__msg { min-height: 0; font-size: 13px; }
.tkk-bundle__msg.is-ok { color: var(--tb-accent); }
.tkk-bundle__msg.is-error { color: var(--tb-danger); }
.tkk-bundle__msg a { color: inherit; text-decoration: underline; }

.tkk-bundle-auto { margin: clamp(32px, 4vw, 56px) 0; }

@media (max-width: 1199.98px) {
    .tkk-bundle__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .tkk-bundle__body { padding: 14px; }
    .tkk-bundle__items { flex-direction: column; padding-top: 10px; }
    .tkk-bundle__this { left: 44px; transform: none; top: -11px; }
    .tkk-bundle__item { flex-direction: row; align-items: center; padding: 12px 12px 12px 44px; }
    .tkk-bundle__check { top: 50%; left: 12px; margin-top: -11px; }
    .tkk-bundle__media { flex: none; width: 84px; height: 72px; padding: 6px; }
    .tkk-bundle__price { margin-top: 2px; }
    .tkk-bundle__plus { width: 24px; height: 24px; font-size: 15px; }
}