/* ==========================================================================
   technika_konfigurator — Stepper-Oberfläche
   Farben/Radien als Custom Properties: übernimmt die FORGE-Tokens (--fg-*), wenn das Template sie
   liefert, sonst eigene Werte. Eigene Gestaltung: Einstellungen → "Plugin-CSS laden" aus und die
   BEM-Klassen (.tkk-*) im Template stylen, oder hier nur die Variablen überschreiben.
   ========================================================================== */

.tkk {
    --tkk-bg: var(--fg-bg, #0a0c0c);
    --tkk-surface: var(--fg-surface, #111515);
    --tkk-surface-2: var(--fg-surface-2, #151a1a);
    --tkk-surface-3: var(--fg-surface-3, #1b2121);
    --tkk-surface-4: var(--fg-surface-4, #232a2a);
    --tkk-line: var(--fg-line, rgba(255, 255, 255, .08));
    --tkk-line-strong: var(--fg-line-strong, rgba(255, 255, 255, .16));
    --tkk-text: var(--fg-text, #eef1ef);
    --tkk-text-2: var(--fg-text-2, #c9cfcc);
    --tkk-muted: var(--fg-muted, #949e9b);
    --tkk-subtle: var(--fg-subtle, #69726f);
    --tkk-accent: var(--fg-lime, #c6f432);
    --tkk-accent-hi: var(--fg-lime-hi, #d7ff5f);
    --tkk-accent-ink: var(--fg-lime-ink, #0b1004);
    --tkk-accent-a10: color-mix(in srgb, var(--tkk-accent) 10%, transparent);
    --tkk-accent-a20: color-mix(in srgb, var(--tkk-accent) 22%, transparent);
    --tkk-accent-glow: color-mix(in srgb, var(--tkk-accent) 38%, transparent);
    --tkk-danger: var(--fg-danger, #ff5d61);
    --tkk-warning: var(--fg-warning, #f4b84a);
    --tkk-success: var(--fg-success, #8fe05c);
    --tkk-danger-bg: color-mix(in srgb, var(--tkk-danger) 10%, transparent);
    --tkk-warning-bg: color-mix(in srgb, var(--tkk-warning) 10%, transparent);
    --tkk-font: var(--fg-font, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --tkk-display: var(--fg-display, var(--tkk-font));
    --tkk-radius-sm: var(--fg-radius-sm, 8px);
    --tkk-radius: var(--fg-radius, 12px);
    --tkk-radius-lg: var(--fg-radius-lg, 16px);
    --tkk-ease: var(--fg-ease, cubic-bezier(.22, 1, .36, 1));
    --tkk-header-h: var(--fg-header-h, 72px);     /* Höhe der Shop-Navigation (FORGE-Token) */
    --tkk-steps-h: 56px;                          /* Höhe der Schrittleiste */
    --tkk-sticky-top: calc(var(--tkk-header-h) + 16px);
    font-family: var(--tkk-font);
    color: var(--tkk-text);
    font-size: 15px;
    line-height: 1.5;
}

.tkk--theme-light {
    --tkk-bg: #f6f7f5;
    --tkk-surface: #ffffff;
    --tkk-surface-2: #f3f5f2;
    --tkk-surface-3: #e9ece7;
    --tkk-surface-4: #dde1db;
    --tkk-line: rgba(10, 20, 10, .09);
    --tkk-line-strong: rgba(10, 20, 10, .18);
    --tkk-text: #121614;
    --tkk-text-2: #333a36;
    --tkk-muted: #5f6763;
    --tkk-subtle: #858c88;
    --tkk-accent: #5c8f00;
    --tkk-accent-hi: #6ba400;
    --tkk-accent-ink: #ffffff;
}

.tkk *, .tkk *::before, .tkk *::after { box-sizing: border-box; }
.tkk :where(h1, h2, h3, h4) { color: var(--tkk-text); margin: 0; letter-spacing: -.01em; }
.tkk :where(p) { margin: 0; }
.tkk :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.tkk :where(button) { font: inherit; color: inherit; }
.tkk :where(img) { max-width: 100%; }
.tkk-ico { width: 20px; height: 20px; flex: none; }
.tkk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tkk-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tkk-accent); }
.tkk-muted { color: var(--tkk-subtle); }
.tkk-noscript { padding: 24px; border: 1px dashed var(--tkk-line-strong); border-radius: var(--tkk-radius); color: var(--tkk-muted); }

/* Seite: Plugin übernimmt die volle Breite (eigener Seitenrand, da #result-wrapper randlos ist).
   Kein Abstand über der Schrittleiste — sie schließt direkt an die Shop-Navigation an. */
.tkk-page #result-wrapper { max-width: none; }
.tkk-page #content-wrapper { padding-top: 0 !important; }
#tkk-app {
    --tkk-gutter: var(--fg-gutter, clamp(16px, 3vw, 48px));
    width: 100%; max-width: var(--fg-max, 1920px); margin: 0 auto; padding: 0 var(--tkk-gutter) 40px;
}
.tkk-sticky-steps .tkk { --tkk-sticky-top: calc(var(--tkk-header-h) + var(--tkk-steps-h) + 16px); }

.tkk-banner { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--tkk-radius); background: var(--tkk-surface-2); border: 1px solid var(--tkk-line); color: var(--tkk-text-2); }
.tkk-banner--error { background: var(--tkk-danger-bg); border-color: color-mix(in srgb, var(--tkk-danger) 40%, transparent); color: var(--tkk-text); }
.tkk-banner--success { background: var(--tkk-accent-a10); border-color: var(--tkk-accent-a20); }
.tkk-banner a { color: var(--tkk-accent); }

/* ========================================================================== Buttons */
.tkk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
    background: transparent; color: var(--tkk-text); font-weight: 600; font-size: 15px; line-height: 1;
    cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .15s var(--tkk-ease);
}
.tkk-btn:disabled { opacity: .45; cursor: not-allowed; }
.tkk-btn:not(:disabled):active { transform: translateY(1px); }
.tkk-btn--primary { background: var(--tkk-accent); color: var(--tkk-accent-ink); }
.tkk-btn--primary:not(:disabled):hover { background: var(--tkk-accent-hi); box-shadow: 0 10px 30px -12px var(--tkk-accent-glow); }
.tkk-btn--outline { border-color: var(--tkk-line-strong); background: transparent; }
.tkk-btn--outline:not(:disabled):hover { border-color: var(--tkk-text-2); background: var(--tkk-surface-2); }
.tkk-btn--ghost { color: var(--tkk-text-2); padding: 0 12px; }
.tkk-btn--ghost:not(:disabled):hover { color: var(--tkk-text); background: var(--tkk-surface-2); }
.tkk-btn--soft { background: var(--tkk-accent-a10); color: var(--tkk-accent); border-color: var(--tkk-accent-a20); }
.tkk-btn--soft:not(:disabled):hover { background: var(--tkk-accent-a20); }
.tkk-btn--block { width: 100%; }
.tkk-btn--sm { min-height: 34px; padding: 0 14px; font-size: 13px; }
.tkk-btn .tkk-ico { width: 18px; height: 18px; }
.tkk-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--tkk-text-2); font-size: 13px; text-decoration: underline; text-decoration-color: var(--tkk-line-strong); text-underline-offset: 3px;
}
.tkk-link:hover { color: var(--tkk-accent); text-decoration-color: currentColor; }
.tkk-link .tkk-ico { width: 15px; height: 15px; }
.tkk :focus-visible { outline: 2px solid var(--tkk-accent); outline-offset: 2px; }

/* ========================================================================== Schritte
   Kompakte Leiste; im Stepper randlos über die volle Breite und (Einstellung „Schrittleiste fixieren“,
   body.tkk-sticky-steps) klebend direkt unter der Shop-Navigation — wie eine zweite Navigationszeile. */
.tkk-part--steps { margin-bottom: 20px; }
.tkk-steps {
    position: relative; border: 1px solid var(--tkk-line); border-radius: var(--tkk-radius);
    background: var(--tkk-surface); overflow: hidden;
}
#tkk-app > .tkk-part--steps {
    margin: 0 calc(-1 * var(--tkk-gutter)) 22px; padding: 0 var(--tkk-gutter);
    border-bottom: 1px solid var(--tkk-line);
    background: color-mix(in srgb, var(--tkk-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
}
#tkk-app > .tkk-part--steps .tkk-steps { border: 0; border-radius: 0; background: transparent; }
.tkk-sticky-steps .tkk-part--steps { position: sticky; top: var(--tkk-header-h); z-index: 1010; }
.tkk-steps__list { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tkk-steps.is-overflow:not(.at-start) .tkk-steps__list { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px); mask-image: linear-gradient(90deg, transparent, #000 64px); }
.tkk-steps.is-overflow:not(.at-end) .tkk-steps__list { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.tkk-steps.is-overflow:not(.at-start):not(.at-end) .tkk-steps__list {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}
.tkk-steps__arrow {
    position: absolute; top: 50%; z-index: 2; display: none; width: 28px; height: 28px; margin-top: -14px; align-items: center; justify-content: center;
    border: 1px solid var(--tkk-line-strong); border-radius: 50%; background: var(--tkk-surface-3); color: var(--tkk-text); cursor: pointer;
}
.tkk-steps__arrow .tkk-ico { width: 16px; height: 16px; }
.tkk-steps__arrow.is-prev { left: 8px; }
.tkk-steps__arrow.is-next { right: 8px; }
.tkk-steps.is-overflow:not(.at-start) .tkk-steps__arrow.is-prev,
.tkk-steps.is-overflow:not(.at-end) .tkk-steps__arrow.is-next { display: inline-flex; }
.tkk-steps__list::-webkit-scrollbar { display: none; }
.tkk-steps__item { flex: 1 0 auto; scroll-snap-align: center; }
.tkk-steps__item + .tkk-steps__item .tkk-step::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--tkk-line);
}
.tkk-step {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
    min-height: var(--tkk-steps-h); padding: 0 14px; border: 0; background: none; cursor: pointer; white-space: nowrap;
    color: var(--tkk-text-2); font-size: 14px; font-weight: 500; transition: color .2s, background .2s;
}
.tkk-step::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
    background: var(--tkk-accent); transform: scaleX(0); transition: transform .35s var(--tkk-ease);
}
.tkk-step:hover { color: var(--tkk-text); background: var(--tkk-surface-2); }
.tkk-step.is-current { color: var(--tkk-accent); font-weight: 600; background: linear-gradient(180deg, transparent, var(--tkk-accent-a10)); }
.tkk-step.is-current::after { transform: scaleX(1); }
.tkk-step__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--tkk-line-strong); color: inherit;
}
.tkk-step__icon .tkk-ico { width: 18px; height: 18px; }
.tkk-step.is-current .tkk-step__icon { border-color: var(--tkk-accent); background: var(--tkk-accent-a10); }
.tkk-step__state {
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
    font-size: 10px; font-weight: 700;
}
.tkk-step.is-done .tkk-step__state { background: var(--tkk-accent); color: var(--tkk-accent-ink); }
.tkk-step.is-done .tkk-step__state .tkk-ico { width: 11px; height: 11px; stroke-width: 3; }
.tkk-step.is-error .tkk-step__state { background: var(--tkk-danger); color: #fff; }
.tkk-step.is-open .tkk-step__state { border: 1.5px solid var(--tkk-line-strong); }
.tkk-step.is-optional .tkk-step__state, .tkk-step.is-blocked .tkk-step__state { display: none; }

/* ========================================================================== Raster */
.tkk-layout {
    display: grid; gap: 24px; align-items: start;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr) minmax(320px, 400px);
}
.tkk-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tkk-col--left, .tkk-col--right { position: sticky; top: var(--tkk-sticky-top); }
.tkk-col--right { border-radius: var(--tkk-radius-lg); }

/* ========================================================================== Hero / Karten links */
.tkk-hero { border-radius: var(--tkk-radius-lg); overflow: hidden; }
.tkk-hero__visual {
    position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 4.3;
    border-radius: var(--tkk-radius-lg);
    background:
        radial-gradient(60% 50% at 50% 55%, var(--tkk-accent-a20), transparent 70%),
        radial-gradient(120% 90% at 50% 100%, var(--tkk-surface-3), var(--tkk-bg) 70%);
}
.tkk-hero__img {
    max-height: 92%; max-width: 92%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
    transition: opacity .35s var(--tkk-ease), transform .5s var(--tkk-ease);
}
.tkk-hero__img.is-swapping { opacity: .25; transform: scale(.97); }
.tkk-hero__text { padding: 18px 4px 0; }
.tkk-hero__title { margin-top: 6px; font-family: var(--tkk-display); font-size: clamp(24px, 2vw, 30px); font-weight: 700; line-height: 1.15; }
.tkk-hero__intro { margin-top: 10px; color: var(--tkk-muted); font-size: 14px; }

.tkk-card-box {
    padding: 22px; border: 1px solid var(--tkk-line); border-radius: var(--tkk-radius-lg); background: var(--tkk-surface);
}
.tkk-box__title { font-size: 17px; font-weight: 600; }

.tkk-power__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 16px; }
.tkk-power__bolt { color: var(--tkk-accent); width: 22px; height: 22px; fill: color-mix(in srgb, var(--tkk-accent) 20%, transparent); }
.tkk-power__value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkk-meter { position: relative; height: 12px; border-radius: 99px; background: var(--tkk-surface-4); overflow: visible; }
.tkk-meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--tkk-accent); transition: width .5s var(--tkk-ease); }
.tkk-meter.is-warn .tkk-meter__fill { background: var(--tkk-warning); }
.tkk-meter.is-bad .tkk-meter__fill { background: var(--tkk-danger); }
.tkk-meter__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--tkk-text-2); opacity: .55; }
.tkk-power__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--tkk-text-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.tkk-power__note { margin-top: 8px; color: var(--tkk-subtle); font-size: 12px; }

.tkk-target__head { display: flex; gap: 14px; align-items: center; }
.tkk-target__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--tkk-accent); }
.tkk-target__icon .tkk-ico { width: 34px; height: 34px; }
.tkk-target__text { margin-top: 12px; color: var(--tkk-text-2); font-size: 14px; }
.tkk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tkk-tags li { padding: 7px 12px; border-radius: 8px; background: var(--tkk-surface-3); color: var(--tkk-text-2); font-size: 13px; }

/* ========================================================================== Bühne */
.tkk-stage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.tkk-stage__title { margin-top: 6px; font-family: var(--tkk-display); font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; line-height: 1.1; }
.tkk-stage__desc { margin-top: 10px; max-width: 640px; color: var(--tkk-text-2); font-size: 16px; }
/* Belegung (Steckplätze/Anschlüsse aus capacity-Regeln) und Netzteil-Bedarf im Schrittkopf */
.tkk-usage { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tkk-usage__chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
    border: 1px solid var(--tkk-line-strong); background: var(--tkk-surface-2); color: var(--tkk-text-2);
    font-size: 12px; font-weight: 600; line-height: 1.4;
}
.tkk-usage__chip .tkk-ico { width: 14px; height: 14px; flex: none; }
.tkk-usage__chip.is-ok { color: var(--tkk-accent); border-color: var(--tkk-accent-a20); background: var(--tkk-accent-a10); }
.tkk-usage__chip.is-full { color: var(--tkk-warning); border-color: color-mix(in srgb, var(--tkk-warning) 40%, transparent); background: var(--tkk-warning-bg); }
.tkk-usage__chip.is-bad { color: var(--tkk-danger); border-color: color-mix(in srgb, var(--tkk-danger) 40%, transparent); background: var(--tkk-danger-bg); }
.tkk-stage__compare { flex: none; }

.tkk-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--tkk-line); border-radius: var(--tkk-radius); background: var(--tkk-surface);
    font-size: 14px;
}
.tkk-toolbar__muted { color: var(--tkk-muted); }
.tkk-toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tkk-facet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tkk-facet__label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: var(--tkk-muted); }
.tkk-facet__label .tkk-ico { width: 16px; height: 16px; }
.tkk-facet__btn {
    padding: 6px 11px; border: 1px solid var(--tkk-line-strong); border-radius: 99px; background: none; cursor: pointer;
    color: var(--tkk-text-2); font-size: 13px;
}
.tkk-facet__btn:hover { border-color: var(--tkk-text-2); }
.tkk-facet__btn.is-active { border-color: var(--tkk-accent); background: var(--tkk-accent-a10); color: var(--tkk-accent); }
.tkk-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--tkk-text-2); user-select: none; }
.tkk-switch input { position: absolute; opacity: 0; pointer-events: none; }
.tkk-switch__track { position: relative; width: 36px; height: 20px; border-radius: 99px; background: var(--tkk-surface-4); transition: background .2s; }
.tkk-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--tkk-text-2); transition: transform .25s var(--tkk-ease), background .2s; }
.tkk-switch input:checked + .tkk-switch__track { background: var(--tkk-accent); }
.tkk-switch input:checked + .tkk-switch__track::after { transform: translateX(16px); background: var(--tkk-accent-ink); }
.tkk-switch input:focus-visible + .tkk-switch__track { outline: 2px solid var(--tkk-accent); outline-offset: 2px; }
.tkk-select { position: relative; display: inline-flex; align-items: center; }
.tkk-select select {
    appearance: none; height: 36px; padding: 0 34px 0 12px; border: 1px solid var(--tkk-line-strong); border-radius: 8px;
    background: var(--tkk-surface-2); color: var(--tkk-text); font: inherit; font-size: 13px; cursor: pointer;
}
.tkk-select .tkk-ico { position: absolute; right: 10px; width: 16px; height: 16px; pointer-events: none; color: var(--tkk-muted); }

.tkk-options { display: flex; flex-direction: column; gap: 14px; }
.tkk-options--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tkk-empty { padding: 28px; border: 1px dashed var(--tkk-line-strong); border-radius: var(--tkk-radius); color: var(--tkk-muted); text-align: center; }

/* ---------------------------------------------------------------- Optionskarte */
.tkk-card {
    position: relative; display: grid; grid-template-columns: 26px 200px minmax(0, 1fr); gap: 0 22px; align-items: start;
    padding: 22px 24px; border: 1px solid var(--tkk-line); border-radius: var(--tkk-radius-lg); background: var(--tkk-surface);
    transition: border-color .2s, box-shadow .3s var(--tkk-ease), background .2s, transform .2s var(--tkk-ease);
}
.tkk-card:hover { border-color: var(--tkk-line-strong); background: color-mix(in srgb, var(--tkk-surface) 70%, var(--tkk-surface-2)); }
.tkk-card.is-selected {
    border-color: var(--tkk-accent);
    box-shadow: 0 0 0 1px var(--tkk-accent), 0 0 46px -18px var(--tkk-accent-glow);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tkk-accent) 4%, var(--tkk-surface)), var(--tkk-surface));
}
.tkk-card.is-conflict { border-color: var(--tkk-danger); box-shadow: 0 0 0 1px var(--tkk-danger); }
.tkk-card.is-soft .tkk-card__media, .tkk-card.is-soft .tkk-card__name, .tkk-card.is-soft .tkk-card__sub,
.tkk-card.is-soft .tkk-chips, .tkk-card.is-soft .tkk-card__desc { opacity: .62; }
.tkk-card.is-hard { opacity: .5; }
.tkk-card.is-hard .tkk-card__hit { cursor: not-allowed; }
.tkk-card--none { grid-template-columns: 26px minmax(0, 1fr); padding-top: 16px; padding-bottom: 16px; }
.tkk-options--tiles .tkk-card { grid-template-columns: 26px minmax(0, 1fr); }
.tkk-options--tiles .tkk-card__media { grid-column: 2; margin-bottom: 12px; width: 100%; height: 120px; }
.tkk-options--tiles .tkk-card__body { grid-column: 2; }

.tkk-card__hit {
    position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: inherit;
    background: transparent; cursor: pointer;
}
.tkk-card__hit:focus-visible { outline: 2px solid var(--tkk-accent); outline-offset: 3px; }
.tkk-card__radio {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 4px;
    border: 2px solid var(--tkk-line-strong); border-radius: 50%; transition: border-color .2s, background .2s;
}
.tkk-card__radio.is-check { border-radius: 7px; }
.tkk-card__radio .tkk-ico { width: 14px; height: 14px; stroke-width: 3; opacity: 0; }
.tkk-card:hover .tkk-card__radio { border-color: var(--tkk-text-2); }
.tkk-card.is-selected .tkk-card__radio { border-color: var(--tkk-accent); box-shadow: inset 0 0 0 4px var(--tkk-surface), inset 0 0 0 12px var(--tkk-accent); }
.tkk-card.is-selected .tkk-card__radio.is-check { background: var(--tkk-accent); box-shadow: none; color: var(--tkk-accent-ink); }
.tkk-card.is-selected .tkk-card__radio.is-check .tkk-ico { opacity: 1; }

.tkk-card__media {
    display: flex; align-items: center; justify-content: center; width: 200px; height: 140px; border-radius: var(--tkk-radius);
    background: radial-gradient(70% 70% at 50% 45%, var(--tkk-surface-3), transparent 75%);
}
.tkk-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.tkk-card__body { min-width: 0; }
.tkk-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tkk-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.tkk-card__name { font-size: 19px; font-weight: 650; line-height: 1.25; }
.tkk-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px;
    background: var(--tkk-accent); color: var(--tkk-accent-ink); font-size: 13px; font-weight: 700; line-height: 1;
}
.tkk-badge .tkk-ico { width: 15px; height: 15px; fill: currentColor; stroke-width: 1.2; }
.tkk-badge--soft { background: var(--tkk-accent-a10); color: var(--tkk-accent); border: 1px solid var(--tkk-accent-a20); }
.tkk-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tkk-price__now { font-size: 21px; font-weight: 700; }
.tkk-price__old { color: var(--tkk-subtle); font-size: 13px; }
.tkk-price__delta { color: var(--tkk-muted); font-size: 13px; font-weight: 500; }
.tkk-price__delta.is-less { color: var(--tkk-success); }
.tkk-card__sub { margin-top: 4px; color: var(--tkk-text-2); font-size: 15px; }
.tkk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tkk-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px;
    background: var(--tkk-surface-3); color: var(--tkk-text-2); font-size: 13.5px; line-height: 1.2;
}
.tkk-chip .tkk-ico { width: 16px; height: 16px; color: var(--tkk-accent); }
.tkk-card__desc {
    margin-top: 12px; color: var(--tkk-muted); font-size: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tkk-card__reason {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 8px;
    background: var(--tkk-warning-bg); color: var(--tkk-warning); font-size: 13px;
}
.tkk-card__reason.is-hard { background: var(--tkk-danger-bg); color: var(--tkk-danger); }
.tkk-card__reason .tkk-ico { width: 16px; height: 16px; margin-top: 1px; }
.tkk-card__foot {
    position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    margin-top: 14px; color: var(--tkk-muted); font-size: 13px; pointer-events: none;
}
.tkk-card__foot > * { pointer-events: auto; }
.tkk-card__spacer { flex: 1; pointer-events: none !important; }
.tkk-card__delivery { pointer-events: none !important; }
.tkk-card__specs-toggle .tkk-ico { transition: transform .25s var(--tkk-ease); }
.tkk-card__specs-toggle[aria-expanded="true"] .tkk-ico { transform: rotate(180deg); }
.tkk-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--tkk-text-2); }
.tkk-check input { width: 16px; height: 16px; accent-color: var(--tkk-accent); cursor: pointer; }
.tkk-qty { display: inline-flex; align-items: center; border: 1px solid var(--tkk-line-strong); border-radius: 8px; overflow: hidden; }
.tkk-qty button { display: inline-flex; width: 32px; height: 30px; align-items: center; justify-content: center; border: 0; background: var(--tkk-surface-2); cursor: pointer; }
.tkk-qty button:disabled { opacity: .4; cursor: default; }
.tkk-qty .tkk-ico { width: 14px; height: 14px; }
.tkk-qty__value { min-width: 34px; text-align: center; color: var(--tkk-text); font-weight: 600; }
.tkk-specs {
    position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px;
    margin: 14px 0 0; padding: 12px 16px; border-radius: var(--tkk-radius); background: var(--tkk-surface-2);
}
.tkk-specs__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--tkk-line); font-size: 13.5px; }
.tkk-specs dt { display: inline-flex; align-items: center; gap: 8px; color: var(--tkk-muted); font-weight: 400; }
.tkk-specs dt .tkk-ico { width: 15px; height: 15px; }
.tkk-specs dd { margin: 0; color: var(--tkk-text); text-align: right; }

.tkk-insights {
    grid-column: 1 / -1; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--tkk-line);
    display: flex; flex-direction: column; gap: 10px;
}
.tkk-insights__title { margin-bottom: 4px; font-size: 15px; font-weight: 600; }
.tkk-bar { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) minmax(70px, auto); align-items: center; gap: 16px; font-size: 14px; }
.tkk-bar__label { color: var(--tkk-text-2); }
.tkk-bar__track { height: 10px; border-radius: 99px; background: var(--tkk-surface-4); overflow: hidden; }
.tkk-bar__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tkk-accent), var(--tkk-accent-hi)); animation: tkk-grow .7s var(--tkk-ease) both; transform-origin: left; }
.tkk-bar__value { color: var(--tkk-text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
@keyframes tkk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tkk-stage__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }

/* ========================================================================== Zusammenfassung */
.tkk-summary {
    display: flex; flex-direction: column; max-height: calc(100vh - var(--tkk-sticky-top) - 16px);
    padding: 24px; border: 1px solid var(--tkk-line); border-radius: var(--tkk-radius-lg); background: var(--tkk-surface);
}
.tkk-part--summary:not(.tkk-col--right .tkk-part--summary) .tkk-summary { max-height: none; }
.tkk-summary__scroll { flex: 1 1 auto; min-height: 140px; overflow: auto; margin: 0 -12px; padding: 0 12px; scrollbar-width: thin; scrollbar-color: var(--tkk-surface-4) transparent; }
.tkk-summary__foot { flex: none; }
.tkk-summary__extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0 4px; }
.tkk-summary__extras-label { width: 100%; color: var(--tkk-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tkk-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px dashed var(--tkk-line-strong); border-radius: 99px;
    background: none; color: var(--tkk-text-2); font-size: 13px; cursor: pointer;
}
.tkk-pill:hover { border-style: solid; border-color: var(--tkk-accent); color: var(--tkk-accent); }
.tkk-pill .tkk-ico { width: 15px; height: 15px; }
.tkk-summary__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tkk-summary__title { font-family: var(--tkk-display); font-size: 24px; font-weight: 700; }
.tkk-summary__close { display: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--tkk-surface-2); cursor: pointer; align-items: center; justify-content: center; }
.tkk-summary__list { margin: 0 -10px; }
.tkk-sum {
    position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 22px; align-items: center; gap: 12px;
    width: 100%; padding: 11px 10px; border: 0; border-bottom: 1px solid var(--tkk-line); border-radius: 8px; background: none;
    text-align: left; cursor: pointer; transition: background .2s;
}
.tkk-sum:hover { background: var(--tkk-surface-2); }
.tkk-sum.is-current { background: var(--tkk-surface-3); border-bottom-color: transparent; }
.tkk-sum.is-current::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--tkk-accent); }
.tkk-sum__icon { display: inline-flex; color: var(--tkk-text-2); }
.tkk-sum__icon .tkk-ico { width: 26px; height: 26px; stroke-width: 1.4; }
.tkk-sum.is-current .tkk-sum__icon { color: var(--tkk-accent); }
.tkk-sum__text { display: flex; flex-direction: column; min-width: 0; }
.tkk-sum__group { font-size: 15px; font-weight: 500; color: var(--tkk-text); }
.tkk-sum__value { color: var(--tkk-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkk-sum.is-open .tkk-sum__value { color: var(--tkk-subtle); font-style: italic; }
.tkk-sum__price { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkk-sum__state { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; }
.tkk-sum.is-done .tkk-sum__state { background: var(--tkk-accent); color: var(--tkk-accent-ink); }
.tkk-sum.is-done .tkk-sum__state .tkk-ico { width: 13px; height: 13px; stroke-width: 3; }
.tkk-sum.is-open .tkk-sum__state { border: 1.5px solid var(--tkk-line-strong); }
.tkk-sum.is-error .tkk-sum__state { color: var(--tkk-danger); }
.tkk-sum.is-error .tkk-sum__state .tkk-ico { width: 20px; height: 20px; }
.tkk-summary__base { display: flex; justify-content: space-between; padding: 12px 0 0; color: var(--tkk-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.tkk-compat { display: flex; gap: 12px; margin: 18px 0 0; padding: 14px; border-radius: var(--tkk-radius); background: var(--tkk-surface-2); }
.tkk-compat__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; }
.tkk-compat__icon .tkk-ico { width: 18px; height: 18px; stroke-width: 2.4; }
.tkk-compat.is-ok .tkk-compat__icon { background: var(--tkk-accent); color: var(--tkk-accent-ink); }
.tkk-compat.is-ok .tkk-compat__title { color: var(--tkk-accent); }
.tkk-compat.is-open .tkk-compat__icon { background: var(--tkk-surface-4); color: var(--tkk-text-2); }
.tkk-compat.is-bad { background: var(--tkk-danger-bg); }
.tkk-compat.is-bad .tkk-compat__icon { background: var(--tkk-danger); color: #fff; }
.tkk-compat.is-bad .tkk-compat__title { color: var(--tkk-danger); }
.tkk-compat__title { display: block; font-size: 16px; font-weight: 600; }
.tkk-compat__text { display: block; color: var(--tkk-muted); font-size: 13px; }
.tkk-compat__list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tkk-text-2); }
.tkk-compat__list li::before { content: "– "; color: var(--tkk-danger); }

.tkk-total { margin: 20px 0 16px; padding-top: 18px; border-top: 1px solid var(--tkk-line); }
.tkk-total__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tkk-total__label { font-size: 20px; font-weight: 600; }
.tkk-total__value { font-family: var(--tkk-display); font-size: clamp(28px, 2.4vw, 36px); font-weight: 700; font-variant-numeric: tabular-nums; }
.tkk-total__note { display: block; margin-top: 2px; text-align: right; color: var(--tkk-subtle); font-size: 12px; }

.tkk-actions { display: flex; flex-direction: column; gap: 12px; }
.tkk-actions .tkk-btn--primary { min-height: 54px; font-size: 17px; }
.tkk-actions__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tkk-actions__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 4px; }

/* ========================================================================== Kompaktliste (Baustein "list") */
.tkk-list { display: flex; flex-direction: column; gap: 8px; }
.tkk-list__group { border: 1px solid var(--tkk-line); border-radius: var(--tkk-radius); background: var(--tkk-surface); }
.tkk-list__group > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.tkk-list__group > summary::-webkit-details-marker { display: none; }
.tkk-list__name { font-weight: 600; }
.tkk-list__value { margin-left: auto; color: var(--tkk-muted); font-size: 13px; text-align: right; }
.tkk-list__group.is-done > summary .tkk-ico { color: var(--tkk-accent); }
.tkk-list__options { padding: 0 8px 8px; }
.tkk-list__option { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.tkk-list__option:hover { background: var(--tkk-surface-2); }
.tkk-list__option.is-selected { background: var(--tkk-accent-a10); color: var(--tkk-accent); }
.tkk-list__option.is-soft { opacity: .65; }
.tkk-list__option.is-hard { opacity: .4; cursor: not-allowed; }

/* ========================================================================== Vergleich / Dialoge */
.tkk-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tkk-modal[hidden] { display: none; }
.tkk-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(6px); }
.tkk-modal__dialog {
    position: relative; width: min(1200px, 100%); max-height: calc(100vh - 48px); overflow: auto;
    padding: 24px; border: 1px solid var(--tkk-line-strong); border-radius: var(--tkk-radius-lg); background: var(--tkk-surface);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); animation: tkk-pop .3s var(--tkk-ease);
}
.tkk-modal__dialog--narrow { width: min(520px, 100%); }
@keyframes tkk-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.tkk-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tkk-modal__head h2 { font-family: var(--tkk-display); font-size: 24px; font-weight: 700; }
.tkk-modal__close { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--tkk-line-strong); border-radius: 10px; background: none; cursor: pointer; }
.tkk-modal__foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.tkk-compare__scroll { overflow-x: auto; }
.tkk-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.tkk-compare th, .tkk-compare td { padding: 10px 14px; border-bottom: 1px solid var(--tkk-line); vertical-align: top; text-align: left; }
.tkk-compare thead th { border-bottom-color: var(--tkk-line-strong); min-width: 200px; }
.tkk-compare tbody th { color: var(--tkk-muted); font-weight: 400; white-space: nowrap; }
.tkk-compare tbody th .tkk-ico { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.tkk-compare__item { display: flex; flex-direction: column; gap: 8px; }
.tkk-compare__media { display: flex; align-items: center; justify-content: center; width: 150px; height: 100px; padding: 8px; border-radius: 10px; align-self: flex-start; }
.tkk-compare__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tkk-compare__item .tkk-price { align-items: flex-start; }
.tkk-compare__item .tkk-price__now { font-size: 17px; }
.tkk-compare__bar { display: block; height: 6px; margin-top: 6px; border-radius: 99px; background: var(--tkk-surface-4); overflow: hidden; }
.tkk-compare__bar span { display: block; height: 100%; background: var(--tkk-accent); border-radius: inherit; }
.tkk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--tkk-muted); }
.tkk-field input, .tkk-field textarea { padding: 10px 12px; border: 1px solid var(--tkk-line-strong); border-radius: 8px; background: var(--tkk-surface-2); color: var(--tkk-text); font: inherit; }
.tkk-quote__msg.is-error { color: var(--tkk-danger); }
.tkk-quote__msg.is-ok { color: var(--tkk-accent); }
html.tkk-noscroll { overflow: hidden; }

.tkk-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 2100; max-width: min(560px, calc(100vw - 32px));
    padding: 13px 18px; border: 1px solid var(--tkk-line-strong); border-radius: 12px; background: var(--tkk-surface-3);
    color: var(--tkk-text); font-size: 14px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
    transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--tkk-ease);
}
.tkk-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tkk-toast a { color: var(--tkk-accent); margin-left: 6px; }

.tkk-mobilebar { display: none; }

/* ========================================================================== Bildplatte
   Herstellerfotos mit weißem Grund: auf heller Platte, multipliziert (wie FORGE body.fg-plate).
   Aktiv bei Einstellung "Bildplatte" oder automatisch, wenn das Template body.fg-plate setzt. */
.tkk--plate .tkk-hero__visual, .fg-plate .tkk .tkk-hero__visual,
.tkk--plate .tkk-card__media, .fg-plate .tkk .tkk-card__media,
.tkk--plate .tkk-compare__media, .fg-plate .tkk .tkk-compare__media {
    background: radial-gradient(90% 80% at 50% 40%, #f7f8f7, #e3e7e4);
}
.tkk--plate .tkk-hero__img, .fg-plate .tkk .tkk-hero__img,
.tkk--plate .tkk-card__media img, .fg-plate .tkk .tkk-card__media img,
.tkk--plate .tkk-compare__media img, .fg-plate .tkk .tkk-compare__media img { mix-blend-mode: multiply; filter: none; }
.tkk--plate .tkk-card__media, .fg-plate .tkk .tkk-card__media { padding: 10px; }
.tkk--plate .tkk-hero__img, .fg-plate .tkk .tkk-hero__img { max-height: 84%; max-width: 84%; }

/* ========================================================================== Responsiv
   Karten richten sich nach der Breite ihres Bausteins (Container Queries) — derselbe Baustein passt in
   die Mittelspalte, in eine schmale Template-Spalte oder auf eine CMS-Seite. */
.tkk-part--stage, .tkk-col--main { container-type: inline-size; container-name: tkk-stage; }
@container tkk-stage (max-width: 820px) {
    .tkk-card { grid-template-columns: 24px 150px minmax(0, 1fr); gap: 0 18px; padding: 20px; }
    .tkk-card__media { width: 150px; height: 112px; }
    .tkk-card__name { font-size: 17px; }
}
@container tkk-stage (max-width: 600px) {
    .tkk-card { grid-template-columns: 24px minmax(0, 1fr); gap: 0 14px; padding: 16px; }
    .tkk-card__media { grid-column: 2; width: 100%; height: 160px; margin-bottom: 12px; }
    .tkk-card__body { grid-column: 2; }
    .tkk-card__head { flex-direction: column; gap: 6px; }
    .tkk-price { align-items: flex-start; }
    .tkk-bar { grid-template-columns: 1fr auto; gap: 6px 12px; }
    .tkk-bar__track { grid-column: 1 / -1; grid-row: 2; }
    .tkk-stage__head { flex-direction: column; }
    .tkk-toolbar__controls { width: 100%; }
}
@media (max-width: 1599.98px) {
    .tkk-layout { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(320px, 370px); gap: 20px; }
}
@media (max-width: 1199.98px) {
    .tkk-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
    .tkk-col--left { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
    .tkk-col--left > .tkk-part:empty { display: none; }
    .tkk-hero { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: center; height: 100%; padding: 14px; border: 1px solid var(--tkk-line); background: var(--tkk-surface); }
    .tkk-hero__visual { aspect-ratio: 1; }
    .tkk-hero__text { padding: 0; }
    .tkk-hero__title { font-size: 22px; }
}
@media (max-width: 991.98px) {
    .tkk-layout { grid-template-columns: minmax(0, 1fr); }
    /* einspaltig: Titel → Optionen → Leistungsbudget/Ziel (Karten des linken Rands lösen sich in das Raster auf) */
    .tkk-col--left { display: contents; }
    .tkk-col--left > .tkk-part--hero { order: 0; }
    .tkk-col--main { order: 1; }
    .tkk-col--left > .tkk-part--power, .tkk-col--left > .tkk-part--target { order: 2; }
    .tkk-col--right {
        position: fixed; inset: auto 0 0 0; z-index: 1045; max-height: 85vh; overflow: auto; border-radius: 18px 18px 0 0;
        transform: translateY(105%); visibility: hidden; box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .7);
        transition: transform .4s var(--tkk-ease), visibility 0s linear .4s;
    }
    .tkk.is-summary-open .tkk-col--right { transform: none; visibility: visible; transition: transform .4s var(--tkk-ease), visibility 0s; }
    .tkk-col--right { overflow: hidden; }
    .tkk-col--right .tkk-summary { max-height: 85vh; border-radius: 18px 18px 0 0; }
    .tkk-summary__close { display: inline-flex; }
    .tkk-mobilebar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; align-items: center; gap: 12px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tkk-line-strong);
        background: color-mix(in srgb, var(--tkk-surface) 92%, transparent); backdrop-filter: blur(12px);
    }
    .tkk-mobilebar__sum { display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; cursor: pointer; padding: 0; }
    .tkk-mobilebar__label { display: inline-flex; align-items: center; gap: 4px; color: var(--tkk-muted); font-size: 12px; }
    .tkk-mobilebar__label .tkk-ico { width: 14px; height: 14px; transform: rotate(180deg); }
    .tkk-mobilebar__sum strong { font-size: 19px; font-variant-numeric: tabular-nums; }
    .tkk-mobilebar .tkk-btn { margin-left: auto; min-height: 48px; padding: 0 16px; font-size: 14px; }
    #tkk-app { padding-bottom: 90px; }
    /* JTL-Consent-Knopf (Fingerabdruck) unten links nicht verdecken */
    body:has(#consent-manager-show-banner) .tkk-mobilebar { padding-left: 64px; }
    .tkk { --tkk-steps-h: 48px; }
    .tkk-step { padding: 0 12px; font-size: 13px; }
    .tkk-step__icon { width: 26px; height: 26px; }
    .tkk-step__icon .tkk-ico { width: 16px; height: 16px; }
}
@media (max-width: 767.98px) {
    .tkk-hero { grid-template-columns: 110px minmax(0, 1fr); }
    .tkk-step__label { display: none; }
    .tkk-step.is-current .tkk-step__label { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    .tkk *, .tkk *::before, .tkk *::after { animation: none !important; transition: none !important; }
}