/* Klavier-Check: Oberfläche der Prüf-App. Nutzt Farben, Schriften und Rundungen der Homepage (styles.css).
   Die Werte in :root sind die gleichen wie in styles.css und dienen nur dem gespeicherten Bericht (Datei ohne Homepage). */
:root{--ink:#14161b;--cream:#faf6ee;--cream-2:#f3ecdd;--paper:#fffdf9;--gold:#c4a05a;--gold-2:#d9bf86;--gold-dark:#8a6a2c;--text:#2b2c31;--muted:#686a72;--line:rgba(20,22,27,.12);--serif:"Lora",Georgia,"Times New Roman",serif;--sans:"Poppins","Segoe UI",Roboto,Arial,sans-serif;--radius:14px;--shadow-sm:0 8px 24px rgba(20,22,27,.07);--kp-ok:#4a7c59;--kp-warn:#b0872a;--kp-bad:#a6483a}
.kp-app,.kp-rep{font-family:var(--sans);color:var(--text);line-height:1.65}
.kp-app{max-width:860px;margin:0 auto}
.kp-app h1,.kp-app h2,.kp-app h3,.kp-rep h1,.kp-rep h2,.kp-rep h3{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.25;letter-spacing:-.005em}
.kp-app h2,.kp-rep h2{font-size:1.45rem;margin:0 0 .6rem}.kp-app h3{font-size:1.15rem;margin:0 0 .4rem}.kp-rep h1{font-size:1.9rem;margin:0 0 .4rem}
.kp-app a,.kp-rep a{color:var(--gold-dark)}
.kp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;margin:0 0 1.3rem;box-shadow:var(--shadow-sm)}
.kp-l{display:block;font-size:.82rem;color:var(--muted);margin:1.1rem 0 .3rem}
.kp-f{display:block;width:100%;padding:.8rem 1rem;border:1px solid rgba(20,22,27,.25);border-radius:12px;font:inherit;background:var(--paper);color:var(--ink)}
.kp-f:focus{outline:2px solid var(--gold);outline-offset:1px}
.kp-b{display:inline-block;font-family:var(--sans);font-weight:500;letter-spacing:.02em;border-radius:999px;padding:.75rem 1.6rem;font-size:.95rem;cursor:pointer;text-decoration:none!important;margin:.45rem .5rem 0 0;transition:.25s;background:linear-gradient(135deg,#d9bf86,#c4a05a 55%,#b38d45);color:var(--ink)!important;border:0;box-shadow:0 8px 22px rgba(196,160,90,.35)}
.kp-b:hover{transform:translateY(-1px)}
.kp-b.alt{background:transparent;box-shadow:none;border:1px solid var(--ink);color:var(--ink)!important}
.kp-b.big{display:block;width:100%;margin:1.3rem 0 0;padding:1rem;font-size:1.05rem}
.kp-b.s{padding:.3rem .9rem;font-size:.8rem;margin:0}.kp-b[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.kp-s{font-size:.85rem;color:var(--muted);margin:.5rem 0}.kp-err{color:var(--kp-bad);font-size:.92rem;margin-top:.7rem}
.kp-c{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;margin:1.1rem 0 0}.kp-c.small{font-size:.8rem;margin:.4rem 0 0}.kp-c input{margin-top:.35rem}
.kp-cov{border-left:4px solid var(--muted);padding:.5rem .9rem;font-size:.88rem;background:var(--cream);border-radius:8px;margin:1.1rem 0 0}.kp-cov.gut{border-color:var(--kp-ok)}.kp-cov.teilweise{border-color:var(--kp-warn)}.kp-cov.keine{border-color:var(--kp-bad)}
.kp-seg{display:flex;flex-wrap:wrap;gap:.4rem;margin:.25rem 0}.kp-seg button{flex:1 1 auto;border:1px solid var(--line);background:#fff;border-radius:12px;padding:.6rem .7rem;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)}
.kp-seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.kp-seg button.on.an{background:var(--kp-ok);border-color:var(--kp-ok)}.kp-seg button.on.al{background:var(--kp-warn);border-color:var(--kp-warn)}.kp-seg button.on.ad{background:var(--kp-bad);border-color:var(--kp-bad)}
.kp-top{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted);margin-bottom:.6rem}#timer.over{color:var(--kp-bad);font-weight:600}
.kp-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}.kp-chip{width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid var(--line);background:#fff;font:inherit;font-size:.8rem;cursor:pointer;color:var(--ink)}
.kp-chip.done{background:var(--gold);border-color:var(--gold)}.kp-chip.part{border-color:var(--kp-warn);color:var(--kp-warn)}.kp-chip.skip{background:var(--cream-2);color:var(--muted)}.kp-chip.cur{outline:2px solid var(--ink);outline-offset:1px}
.kp-cam{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;max-height:68vh;margin:.9rem auto}@media(min-width:720px){.kp-cam{aspect-ratio:4/3}}
.kp-cam video{width:100%;height:100%;object-fit:cover;display:block}
.kp-q{position:absolute;left:8px;right:8px;bottom:8px;border-radius:12px;padding:.55rem .85rem;font-size:.9rem;background:rgba(20,22,27,.88);color:#fff;border:2px solid transparent}.kp-q.gut{border-color:var(--kp-ok)}.kp-q.mittel{border-color:var(--kp-warn)}.kp-q.schlecht{border-color:var(--kp-bad)}
.kp-row{display:flex;flex-wrap:wrap;gap:.2rem .4rem;align-items:center}.kp-row.nav{justify-content:space-between;margin-top:1.3rem;border-top:1px solid var(--line);padding-top:1.1rem}
.kp-rev{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;margin:.9rem 0}.kp-rev img{width:190px;max-width:45%;border-radius:12px;border:1px solid var(--line)}
.kp-qv.gut{color:var(--kp-ok)}.kp-qv.mittel{color:var(--kp-warn)}.kp-qv.schlecht{color:var(--kp-bad)}
.kp-qq{margin:1.1rem 0;font-size:.95rem}
.kp-list{list-style:none;padding:0;margin:1rem 0}.kp-list li{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.9rem}.kp-list li.ok span:before{content:"✓ ";color:var(--kp-ok)}.kp-list li.no span:before{content:"! ";color:var(--kp-warn);font-weight:700}
.kp-big{font:500 1.35rem var(--serif);color:var(--ink);margin:.2rem 0}
.g-klasse{border-left:6px solid var(--kp-ok)}.g-teilbericht{border-left:6px solid var(--kp-warn)}.g-gesperrt{border-left:6px solid var(--kp-bad)}
.kp-tw{overflow-x:auto}.kp-rep table{border-collapse:collapse;width:100%;font-size:.88rem}.kp-rep th,.kp-rep td{text-align:left;vertical-align:top;padding:.6rem .5rem;border-bottom:1px solid var(--line)}.kp-rep th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.kp-rep td img{width:64px;height:48px;object-fit:cover;border-radius:6px;margin:0 .25rem .25rem 0;border:1px solid var(--line)}
.s-n{color:var(--kp-ok)}.s-l{color:var(--kp-warn)}.s-d,.s-k{color:var(--kp-bad);font-weight:600}.s-u{color:var(--muted)}
.kp-price{text-align:center;border:1px solid var(--gold);background:var(--cream);border-radius:var(--radius);padding:1.1rem;margin:.9rem 0}
@media print{.noprint,#start,#capture,#check,.site-nav,.footer,.page-hero,.cookie-banner,.skip-link{display:none!important}.kp-card{box-shadow:none;break-inside:avoid}body{background:#fff}}
@media(max-width:575px){.kp-hero{padding:92px 0 20px!important}.kp-hero .lead{display:none}.kp-hero .crumbs{margin-bottom:.5rem}}