/* ==========================================================================
   ESBYTE · KI-Reifegrad-Selbsttest (/ki-selbsttest/), seit 19.10.2026
   Nur auf dieser Seite geladen (extra_head in build.py). Alle Regeln gelten
   innerhalb von .kst und ergänzen esbyte.css: Schrift, Überschriften und
   Knöpfe (.btn, .btn--primary, .btn--secondary) kommen von der Website,
   hier stehen nur die Bausteine des Tests. Farben über die Tokens der
   Website, damit das dunkle Farbschema greift.
   ========================================================================== */

/* Grundlagen innerhalb des Tests */
.kst fieldset{border:0;margin:0;padding:0;min-width:0;display:block}
.kst legend{padding:0;text-transform:none;letter-spacing:normal}
.kst ul,.kst ol{list-style:none}
.kst :is(#kst-app,h1):focus{outline:none}
.kst .mt{margin-top:2rem}
.kst .lead{margin-top:1.1rem}
.kst .lead--sm{font-size:1.0625rem;margin-top:.6rem}
.kst .kicker--light{color:#bfe0df}
.kst .btn--light{background:#fff;color:var(--teal-deep);border-color:#fff}
.kst .btn--light:hover{background:var(--teal-wash);color:var(--teal-deep)}
.kst .btn--lg{min-height:56px;padding:.9rem 1.8rem;font-size:1.0625rem}
.kst .textlink{background:none;border:0;padding:0;font-weight:700;color:var(--teal-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kst .textlink--light{color:#fff}
.kst .card{display:block}
.kst .tag{background:none}
.kst .notice{font-size:1rem}
/* Ohne JavaScript keine Knöpfe, die nichts tun (Hinweis steht im <noscript>) */
.kst:not(.kst--js) [data-kst-start]{display:none}
.kst .bridge__fit{margin-top:1rem;font-weight:700;color:#fff}
@media (max-width:600px){.kst .btn{width:100%}.kst .quiz__actions .btn{width:auto;flex:1 1 auto}}

/* Einstieg */
.kst .hero{padding-block:clamp(3rem,6vw,5.5rem);background:linear-gradient(180deg,#fff 0%,#f6f9f9 100%)}
.kst .hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.kst .hero__grid>*{min-width:0}
.kst .actions{margin-top:2rem}
.kst .meta{margin-top:1rem;font-size:.9375rem;color:var(--text-quiet)}
.kst .preview{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;box-shadow:var(--shadow)}
.kst .preview__head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.kst .preview__head .kicker{margin:0}
.kst .tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-quiet);border:1px solid var(--line-strong);border-radius:999px;padding:.2rem .6rem}
.kst .preview__stage{margin-top:1.25rem;font-size:1.25rem;color:var(--heading)}
.kst .preview__core{margin-top:1.25rem;font-size:1.125rem;line-height:1.5;color:var(--heading);font-weight:700}
.kst .preview__core span{display:inline-block;min-width:5.5rem;font-weight:400;color:var(--text-quiet);font-size:.9375rem}
.kst .preview .small{margin-top:.75rem}
.kst .section{padding-block:var(--section-y)}
.kst .section--alt{background:var(--bg-alt)}
.kst .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.kst .feature{border-top:3px solid var(--esbyte-teal);padding-top:1.25rem}
.kst .feature__n{font-weight:700;color:var(--teal-text);font-size:.875rem;letter-spacing:.08em}
.kst .feature h3{margin-top:.5rem}
.kst .feature p{margin-top:.6rem}
.kst .arealist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2.5rem}
.kst .arealist li{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line-strong)}
.kst .arealist__n{font-weight:700;color:var(--teal-text);font-size:.9375rem;padding-top:.15rem}
.kst .arealist p{margin-top:.35rem;color:var(--text-quiet);font-size:.9375rem}
.kst .compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.kst .compare__col{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem}
.kst .compare__col--accent{border-color:var(--esbyte-teal);background:var(--teal-wash)}
.kst .compare ul{margin-top:1rem;display:grid;gap:.6rem}
.kst .compare li{padding-left:1.4rem;position:relative}
.kst .compare li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--esbyte-teal)}
.kst .compare li.price{font-weight:700;color:var(--heading)}
.kst .compare li.price::before{display:none}
.kst .compare .textlink{display:inline-block;margin-top:1.25rem}
.kst .band{background:var(--teal-wash);padding-block:2.5rem}
.kst .band__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap}
.kst .band p{max-width:70ch}

/* Fragen */
.kst .quiz{background:var(--bg-alt);padding-block:clamp(2rem,4vw,3.5rem)}
.kst .quiz__grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:2.5rem;align-items:start}
.kst .quiz__side{position:sticky;top:1.5rem}
.kst .stepnav{display:grid;gap:.35rem}
.kst .stepnav__btn{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:var(--r-md);padding:.65rem .75rem;cursor:pointer;color:var(--text-quiet);font-size:.9375rem}
.kst .stepnav__btn:disabled{cursor:default;opacity:.55}
.kst .stepnav__btn.is-active{background:#fff;border-color:var(--line);color:var(--heading);font-weight:700}
.kst .stepnav__btn.is-done{color:var(--teal-text)}
.kst .stepnav__n{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--line-strong);font-size:.8125rem;font-weight:700;background:#fff}
.kst .is-active .stepnav__n{background:var(--esbyte-teal);border-color:var(--esbyte-teal);color:#fff}
.kst .is-done .stepnav__n{border-color:var(--esbyte-teal);color:var(--teal-text)}
.kst .side-note{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line-strong)}
.kst .quiz__panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2.5rem)}
.kst .progress-meta{display:flex;justify-content:space-between;font-size:.875rem;color:var(--text-quiet)}
.kst .progress{height:6px;border-radius:3px;background:var(--line);margin-top:.5rem;overflow:hidden}
.kst .progress span{display:block;height:100%;background:var(--esbyte-teal);transition:width var(--t)}
.kst .quiz__panel .kicker.mt{margin-top:2rem}
.kst .question{margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--line)}
.kst .question:first-child{margin-top:1.5rem;border-top:0;padding-top:0}
.kst .question legend{float:left;width:100%}
.kst .question legend+*{clear:both}
.kst .question legend{margin-bottom:.35rem;font-size:1.1875rem;font-weight:700;color:var(--heading);line-height:1.35}
.kst .question__n{display:block;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);margin-bottom:.4rem}
.kst .question__hint{margin-top:.6rem;font-size:.9375rem;color:var(--text-quiet);max-width:70ch}
.kst .opts{display:grid;gap:.6rem;margin-top:1.1rem}
.kst .opt{display:flex;gap:.9rem;align-items:flex-start;padding:.95rem 1.1rem;border:1px solid var(--line-strong);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--t),background var(--t);line-height:1.45}
.kst .opt:hover{border-color:var(--esbyte-teal)}
.kst .opt input{flex:none;margin:.2rem 0 0;width:1.15rem;height:1.15rem;accent-color:var(--esbyte-teal)}
.kst .opt:has(input:checked){border-color:var(--esbyte-teal);background:var(--teal-wash);color:var(--heading)}
.kst .opt--unsure{margin-top:.6rem;border-style:dashed;color:var(--text-quiet);font-size:.9375rem}
.kst .question.is-missing .opts .opt,.kst .question.is-missing .opt--unsure{border-color:#b54a3c}
.kst .question__missing{margin-top:.6rem;color:#a23a2d;font-weight:700;font-size:.9375rem}
.kst .quiz__actions{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--line)}

/* Auswertung */
.kst .result{background:var(--bg-alt);padding-block:clamp(2rem,4vw,3.5rem) var(--section-y)}
.kst .result__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,3rem)}
.kst .result__stage{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.6rem)}
.kst .result__stage span{display:block;font-size:.4em;letter-spacing:.02em;color:var(--teal-text);margin-bottom:.35rem}
.kst .result__hero .small{margin-top:.9rem}
.kst .ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;align-items:end;height:240px}
.kst .ladder__step{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center;min-width:0}
.kst .ladder__bar{position:relative;display:block;height:var(--h);border-radius:6px 6px 0 0;background:var(--line)}
.kst .ladder__step.is-below .ladder__bar{background:#b9d6d6}
.kst .ladder__step.is-current .ladder__bar{background:var(--esbyte-teal)}
.kst .ladder__here{position:absolute;left:50%;bottom:calc(100% + .45rem);transform:translateX(-50%);white-space:nowrap;font-size:.8125rem;font-weight:700;color:#fff;background:var(--teal-deep);border-radius:999px;padding:.25rem .65rem}
.kst .ladder__here::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--teal-deep)}
.kst .ladder__num{margin-top:.5rem;font-weight:700;color:var(--heading);font-size:1rem}
.kst .ladder__name{font-size:.8125rem;color:var(--text-quiet);line-height:1.25;hyphens:manual}
.kst .here-short{display:none}
.kst .is-current .ladder__name{color:var(--heading);font-weight:700}
.kst .ladder--compact{height:150px;margin-top:2.6rem;gap:.35rem}
.kst .ladder--compact .ladder__name{font-size:.6875rem}
.kst .ladder--compact .ladder__here{font-size:.6875rem}
.kst .alert{margin-top:1.25rem;background:#fff4e5;border:1px solid #e9b872;border-left-width:6px;border-radius:var(--r-md);padding:1.1rem 1.35rem;color:#5b3d10}
.kst .core{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.25rem}
.kst .core__pair,.kst .core__text{background:var(--teal-deep);color:#fff;border-radius:var(--r-lg);padding:1.4rem 1.75rem}
.kst .core__text{grid-column:1/-1;font-size:1.25rem;font-weight:700;line-height:1.4}
.kst .core__pair--weak{background:#fff;color:var(--heading);border:2px solid var(--teal-deep)}
.kst .core__label{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.kst .core__value{display:block;margin-top:.35rem;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:700;line-height:1.2}
.kst .result__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.25rem;margin-top:1.25rem;align-items:start}
.kst .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem)}
.kst .card h2{margin-bottom:1.25rem}
.kst .profile{display:grid;gap:1.1rem}
.kst .prow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name label" "bar bar";gap:.45rem 1rem;align-items:baseline}
.kst .prow__name{grid-area:name;font-weight:700;color:var(--heading)}
.kst .prow__name small{font-weight:400;color:var(--text-quiet)}
.kst .prow__label{grid-area:label;font-size:.9375rem;color:var(--text-quiet)}
.kst .prow__bar{grid-area:bar;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.kst .seg{height:14px;background:var(--line);border-radius:3px}
.kst .seg.is-on{background:var(--esbyte-teal)}
.kst .prow.is-weak .seg.is-on{background:var(--esbyte-teal-light)}
.kst .prow.is-weak .prow__label{color:var(--heading);font-weight:700}
.kst .prow.is-strong .prow__label{color:var(--teal-text);font-weight:700}
.kst .legend{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:1rem;font-size:.75rem;color:var(--text-quiet);text-align:center}
.kst .recs{display:grid;gap:1.5rem}
.kst .rec{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.75rem}
.kst .rec__n{font-weight:700;font-size:1.25rem;color:var(--teal-text);border-top:3px solid var(--esbyte-teal);padding-top:.35rem;height:max-content}
.kst .rec__area{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-quiet)}
.kst .rec h3{margin-top:.2rem}
.kst .rec__quote{margin-top:.5rem;font-size:.9375rem;font-style:italic;font-weight:300;color:var(--text-quiet)}
.kst .rec p:last-child{margin-top:.5rem}
.kst .card--open{margin-top:1.25rem}
.kst .card--open h2{margin-bottom:.5rem}
.kst .openlist{margin-top:1rem;display:grid;gap:.5rem}
.kst .openlist li{padding:.7rem 1rem;border:1px dashed var(--line-strong);border-radius:var(--r-sm)}
.kst .bridge{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:2rem 3rem;align-items:center;margin-top:1.25rem;background:var(--esbyte-teal-dark);color:#e6f0f0;border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,3rem)}
.kst .bridge h2{color:#fff}
.kst .bridge__text p{margin-top:1rem;max-width:62ch}
.kst .bridge__price{font-weight:700;color:#fff}
.kst .bridge__actions{display:grid;gap:1rem;justify-items:start}
.kst .bridge__actions .small{color:#cfe1e1}
.kst .tools{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2rem}
.kst #copy-hint{margin-top:.75rem}
.kst .copy-fallback{width:100%;min-height:12rem;margin-top:.75rem;font:inherit;font-size:.875rem;padding:.75rem;border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.kst .method{margin-top:2rem;border-top:1px solid var(--line-strong);padding-top:1.25rem;max-width:80ch}
.kst .method summary{cursor:pointer;font-weight:700;color:var(--teal-text)}
.kst .method p{margin-top:.9rem;font-size:.9375rem}
.kst .print-only{display:none}

/* Schmale Bildschirme */
@media (max-width:960px){
  .kst .hero__grid,.kst .result__hero,.kst .result__grid,.kst .bridge{grid-template-columns:minmax(0,1fr)}
  .kst .quiz__grid{grid-template-columns:minmax(0,1fr)}
  .kst .quiz__side{position:static}
  .kst .stepnav{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kst .stepnav__btn span:last-child{display:none}
  .kst .stepnav__btn{justify-content:center;padding:.4rem}
  .kst .side-note{display:none}
  .kst .grid3{grid-template-columns:minmax(0,1fr)}
  .kst .arealist,.kst .compare{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .kst .ladder{height:170px;gap:.3rem}
  .kst .ladder__name{display:none}
  .kst .here-long{display:none}
  .kst .here-short{display:inline}
  .kst .ladder--compact{height:130px}
  .kst .core{grid-template-columns:minmax(0,1fr)}
  .kst .btn{width:100%}
  .kst .quiz__actions .btn{width:auto;flex:1 1 auto}
  .kst .tools .textlink{padding:.4rem 0}
}

/* Die Bereichsleiste bleibt beim Scrollen unter dem Seitenkopf */
.kst .quiz__side{top:calc(var(--header-h) + 1.5rem)}

/* Dunkles Farbschema der Website: feste Weißflächen des Tests auf Tokens */
[data-theme="dark"] .kst :is(.preview,.quiz__panel,.result__hero,.card,.stepnav__btn.is-active,.stepnav__n,.core__pair--weak,.compare__col){background:var(--surface)}
[data-theme="dark"] .kst .compare__col--accent{background:var(--teal-wash)}
[data-theme="dark"] .kst .hero{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%)}
[data-theme="dark"] .kst .ladder__step.is-below .ladder__bar{background:#2f5654}
[data-theme="dark"] .kst .core__pair--weak{border-color:var(--esbyte-teal-light)}
[data-theme="dark"] .kst .alert{background:#2e2414;border-color:#9a7533;color:#f1d9b0}
[data-theme="dark"] .kst .question.is-missing .opts .opt,[data-theme="dark"] .kst .question.is-missing .opt--unsure{border-color:#e08a7c}
[data-theme="dark"] .kst .question__missing{color:#f0a598}
[data-theme="dark"] .kst .copy-fallback{background:var(--bg);color:var(--text)}
[data-theme="dark"] .kst .btn--secondary{background:transparent}

/* Druck: nur die Auswertung */
@media print{
  .topband,.site-header,.mobile-nav,.site-footer,.skiplink,#kst-home,
  .kst .tools,.kst #copy-hint,.kst .copy-fallback,.kst .bridge__actions{display:none!important}
  body{background:#fff}
  .kst .result{background:#fff;padding:0}
  .kst .print-only{display:block;margin-bottom:1rem;font-weight:700;color:var(--teal-text)}
  .kst :is(.card,.result__hero,.core__pair,.bridge,.alert){break-inside:avoid;box-shadow:none}
  .kst :is(.result__hero,.result__grid,.bridge){grid-template-columns:1fr 1fr}
  .kst *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}