/* Kraken Referral Check – Frontend
   Farben kommen aus „Reflinks → Design“ als CSS-Variablen auf .krc-scope */

.krc-scope {
    --krc-accent: #6a3be8;
    --krc-accent-text: #fff;
    --krc-heading: #14121f;
    --krc-text: #3d3a4b;
    --krc-muted: #77738a;
    --krc-box-bg: #fff;
    --krc-border: #e8e6f0;
    --krc-tab-bg: #f4f1fe;
    --krc-tab-text: #3d3a4b;
    --krc-success: #16a34a;
    --krc-warning: #d97706;
    --krc-radius: 14px;
    --krc-tint: color-mix(in srgb, var(--krc-accent) 9%, transparent);
    color: var(--krc-text);
    line-height: 1.6;
}
.krc-scope *, .krc-scope *::before, .krc-scope *::after { box-sizing: border-box; }

/* ---------- Reiter ----------
   Markup: Reiter und Box abwechselnd. Desktop: alle Boxen per „order“ unter die Reiterzeile.
   Handy (≤ 700px): Akkordeon, die Box öffnet direkt unter ihrem Reiter. */
.krc-tabs-wrap { margin: 2em 0; }
.krc-tablist { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.krc-tabs-align-center .krc-tablist { justify-content: center; }
.krc-tab {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--krc-tab-text);
    font: inherit;
    scroll-margin-top: 90px;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.krc-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--krc-accent) 45%, transparent); outline-offset: 2px; }
.krc-tab-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; flex: none; }
.krc-tab-text { display: flex; flex-direction: column; min-width: 0; }
.krc-tab-label { font-weight: 650; color: inherit; }
.krc-tab-badge, .krc-tab-teaser { display: none; }
.krc-tab-chevron {
    display: none; flex: none; width: 9px; height: 9px; margin: 0 .25rem 0 auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .55;
    transform: translateY(-2px) rotate(45deg); transition: transform .25s, opacity .25s;
}
.krc-tab.is-active .krc-tab-chevron { transform: translateY(2px) rotate(-135deg); opacity: 1; }
.krc-panel { order: 99; flex: 0 0 100%; width: 100%; }
.krc-tabs-line { display: none; }

/* Stil: Karten */
.krc-tabs--cards .krc-tablist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.krc-tabs--cards.krc-tabs-align-center .krc-tablist { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: center; }
.krc-tabs--cards .krc-panel { grid-column: 1 / -1; }
.krc-tabs--cards .krc-tab {
    position: relative;
    align-items: flex-start;
    padding: 1.25rem 2.75rem 1.25rem 1.25rem;
    background: var(--krc-box-bg);
    border: 1.5px solid var(--krc-border);
    border-radius: var(--krc-radius);
    box-shadow: 0 1px 2px rgba(20, 18, 31, .04);
}
.krc-tabs--cards .krc-tab:hover { border-color: color-mix(in srgb, var(--krc-accent) 45%, var(--krc-border)); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 18, 31, .07); }
.krc-tabs--cards .krc-tab.is-active { border-color: var(--krc-accent); background: color-mix(in srgb, var(--krc-accent) 5%, var(--krc-box-bg)); box-shadow: 0 0 0 3px var(--krc-tint); }
.krc-tabs--cards .krc-tab-label { font-size: 1.1em; color: var(--krc-heading); }
.krc-tabs--cards .krc-tab-badge {
    display: inline-block; align-self: flex-start; order: -1; margin-bottom: .45rem;
    padding: .15em .7em; border-radius: 999px; background: var(--krc-tab-bg); color: var(--krc-accent);
    font-size: .78em; font-weight: 650;
}
.krc-tabs--cards .krc-tab-teaser { display: block; margin-top: .3rem; font-size: .9em; color: var(--krc-muted); line-height: 1.45; }
.krc-tabs--cards .krc-tab-chevron { display: block; position: absolute; right: 1.25rem; top: 50%; margin: -6px 0 0; }
.krc-tabs--cards .krc-tab.is-active .krc-tab-chevron { color: var(--krc-accent); }

/* Stil: Pillen */
.krc-tabs--pills .krc-tab { padding: .6rem 1.2rem; border-radius: 999px; background: var(--krc-tab-bg); }
.krc-tabs--pills .krc-tab-logo { width: 24px; height: 24px; border-radius: 6px; }
.krc-tabs--pills .krc-tab:hover { background: color-mix(in srgb, var(--krc-accent) 16%, var(--krc-tab-bg)); }
.krc-tabs--pills .krc-tab.is-active { background: var(--krc-accent); color: var(--krc-accent-text); box-shadow: 0 6px 18px color-mix(in srgb, var(--krc-accent) 30%, transparent); }
.krc-tabs--pills .krc-panel { margin-top: .25rem; }

/* Stil: Unterstrichen */
.krc-tabs--underline .krc-tablist { gap: 0; }
.krc-tabs--underline .krc-tab { position: relative; z-index: 1; padding: .8rem 1.25rem; border-bottom: 2.5px solid transparent; }
.krc-tabs--underline .krc-tab-logo { width: 24px; height: 24px; border-radius: 6px; }
.krc-tabs--underline .krc-tab:hover { color: var(--krc-accent); }
.krc-tabs--underline .krc-tab.is-active { color: var(--krc-accent); border-bottom-color: var(--krc-accent); }
.krc-tabs--underline .krc-tabs-line { display: block; order: 98; flex: 0 0 100%; margin-top: -1.5px; border-top: 1.5px solid var(--krc-border); }
.krc-tabs--underline .krc-panel { margin-top: 1.5rem; }

/* ---------- Handy: Akkordeon ---------- */
@media (max-width: 700px) {
    .krc-tablist, .krc-tabs--cards .krc-tablist { display: flex; flex-direction: column; gap: .6rem; }
    .krc-tab { width: 100%; }
    .krc-panel { order: 0; margin-top: 0 !important; }
    .krc-tab-chevron { display: block; }
    .krc-tabs-line { display: none !important; }
    .krc-tabs--pills .krc-tab { padding: .9rem 1.2rem; border-radius: calc(var(--krc-radius) * .8); }
    .krc-tabs--underline .krc-tablist { gap: 0; }
    .krc-tabs--underline .krc-tab { padding: 1rem .25rem; border-bottom: 1.5px solid var(--krc-border); }
    .krc-tabs--underline .krc-tab.is-active { border-bottom-color: var(--krc-accent); }
    .krc-tabs--underline .krc-panel { padding: 1.25rem 0 1rem !important; }
}

/* ---------- Box ---------- */
.krc-panel {
    position: relative;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    background: var(--krc-box-bg);
    border: 1.5px solid var(--krc-border);
    border-radius: var(--krc-radius);
    box-shadow: 0 10px 40px rgba(20, 18, 31, .06);
    animation: krc-in .3s ease;
}
.krc-tabs--underline .krc-panel { border: 0; box-shadow: none; padding: 0; background: transparent; }
.krc-panel[hidden] { display: none; }
.krc-anchor { position: absolute; top: -100px; }
@keyframes krc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Bausteine ---------- */
.krc-scope .krc-panel > :first-child:not(.krc-anchor), .krc-scope .krc-panel > .krc-anchor + *, .krc-scope.krc-landing > :first-child { margin-top: 0; }
.krc-panel > :last-child, .krc-landing > :last-child { margin-bottom: 0; }
.krc-scope .krc-h { color: var(--krc-heading); line-height: 1.25; margin: 1.4em 0 .5em; }
.krc-scope h2.krc-h { font-size: 1.75em; }
.krc-scope h3.krc-h { font-size: 1.3em; }
.krc-scope h4.krc-h { font-size: 1.1em; }
.krc-align-center { text-align: center; justify-content: center; }
.krc-align-right { text-align: right; justify-content: flex-end; }
.krc-text { margin: 0 0 1em; }
.krc-text > :first-child { margin-top: 0; }
.krc-text > :last-child { margin-bottom: 0; }
.krc-text a { color: var(--krc-accent); }

.krc-scope .krc-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .8em 1.6em; border: 2px solid var(--krc-accent); border-radius: calc(var(--krc-radius) * .65);
    background: var(--krc-accent); color: var(--krc-accent-text);
    font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.krc-scope .krc-button:hover { color: var(--krc-accent-text); transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--krc-accent) 32%, transparent); }
.krc-scope .krc-button.krc-secondary { background: transparent; color: var(--krc-accent); }
.krc-scope .krc-button.krc-secondary:hover { background: var(--krc-tint); color: var(--krc-accent); box-shadow: none; }
.krc-scope .krc-button.krc-full { width: 100%; }
.krc-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.25em 0; }
.krc-btn-note { font-size: .88em; color: var(--krc-muted); }

.krc-pdf { margin: 1em 0; }
.krc-pdf-frame { display: block; width: 100%; height: 75vh; min-height: 460px; margin-bottom: .75rem; border: 1.5px solid var(--krc-border); border-radius: var(--krc-radius); }
.krc-scope .krc-pdf-link {
    display: inline-flex; align-items: center; gap: .85rem; padding: .7rem 1.2rem .7rem .7rem;
    border: 1.5px solid var(--krc-border); border-radius: var(--krc-radius); background: var(--krc-box-bg);
    color: var(--krc-heading); font-weight: 600; text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.krc-scope .krc-pdf-link:hover { border-color: var(--krc-accent); box-shadow: 0 0 0 3px var(--krc-tint); color: var(--krc-heading); }
.krc-pdf-icon {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
    background: var(--krc-tint); color: var(--krc-accent); font-size: .72em; font-weight: 800; letter-spacing: .04em;
}

.krc-image { margin: 1.25em 0; }
.krc-image img { max-width: 100%; height: auto; border-radius: calc(var(--krc-radius) * .7); }
.krc-image-full img { width: 100%; }
.krc-image.krc-align-center { display: flex; }
.krc-image.krc-align-right { display: flex; }

.krc-callout { margin: 1.25em 0; padding: 1rem 1.25rem; border-radius: calc(var(--krc-radius) * .7); border-left: 4px solid; }
.krc-callout > :first-child { margin-top: 0; }
.krc-callout > :last-child { margin-bottom: 0; }
.krc-callout-info { border-color: var(--krc-accent); background: var(--krc-tint); }
.krc-callout-success { border-color: var(--krc-success); background: color-mix(in srgb, var(--krc-success) 9%, transparent); }
.krc-callout-warning { border-color: var(--krc-warning); background: color-mix(in srgb, var(--krc-warning) 10%, transparent); }

.krc-divider { border: 0; border-top: 1.5px solid var(--krc-border); margin: 2em 0; }
.krc-spacer-s { height: .75rem; }
.krc-spacer-m { height: 1.75rem; }
.krc-spacer-l { height: 3.5rem; }

/* ---------- Kraken-Prüfung ---------- */
.krc-box { max-width: 560px; margin: 1em 0; }
.krc-form label { display: block; font-weight: 600; margin-bottom: .35em; color: var(--krc-heading); }
.krc-form input[type="text"], .krc-form input[type="email"] {
    width: 100%; padding: .8em 1em; font: inherit; color: var(--krc-heading);
    background: var(--krc-box-bg); border: 1.5px solid var(--krc-border); border-radius: calc(var(--krc-radius) * .65);
    transition: border-color .2s, box-shadow .2s;
}
.krc-form input:focus { outline: none; border-color: var(--krc-accent); box-shadow: 0 0 0 3px var(--krc-tint); }
.krc-form .krc-consent label { font-weight: normal; color: var(--krc-text); }
.krc-hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }
.krc-result { margin: 1em 0; padding: 1.1rem 1.3rem; border-radius: calc(var(--krc-radius) * .7); border-left: 4px solid; }
.krc-result h3 { margin: 0 0 .4em; color: var(--krc-heading); }
.krc-result > :last-child { margin-bottom: 0; }
.krc-success { border-color: var(--krc-success); background: color-mix(in srgb, var(--krc-success) 9%, transparent); }
.krc-fail { border-color: var(--krc-warning); background: color-mix(in srgb, var(--krc-warning) 9%, transparent); }
.krc-msg { padding: .75em 1em; border-radius: calc(var(--krc-radius) * .6); }
.krc-error { color: #b42318; background: rgba(180, 35, 24, .08); }
.krc-note { font-size: .9em; color: var(--krc-muted); }

/* ---------- Kacheln (Alternative) ---------- */
.krc-tiles { display: grid; grid-template-columns: repeat(var(--krc-cols, 3), minmax(0, 1fr)); gap: 1.25rem; margin: 2em 0; }
@media (max-width: 900px) { .krc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .krc-tiles { grid-template-columns: 1fr; } }
.krc-scope .krc-tile {
    display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem;
    background: var(--krc-box-bg); border: 1.5px solid var(--krc-border); border-radius: var(--krc-radius);
    color: var(--krc-text); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.krc-scope .krc-tile:hover { transform: translateY(-2px); border-color: var(--krc-accent); box-shadow: 0 10px 28px rgba(20, 18, 31, .08); }
.krc-tile-logo { width: 44px; height: 44px; object-fit: contain; }
.krc-badge { align-self: flex-start; padding: .15em .7em; border-radius: 999px; background: var(--krc-tab-bg); color: var(--krc-accent); font-size: .78em; font-weight: 650; }
.krc-tile-title { font-size: 1.15em; font-weight: 700; color: var(--krc-heading); }
.krc-tile-teaser { flex: 1; color: var(--krc-muted); font-size: .92em; }
.krc-tile-more { color: var(--krc-accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .krc-panel, .krc-tab, .krc-button { animation: none; transition: none; } }