/* Klavier-Check: Bausteine für Startseite und Verkaufsseite (nutzt Farben und Schriften aus styles.css) */
.nav-new{display:inline-block;margin-left:.35rem;padding:.05rem .5rem;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;vertical-align:.1em}
.app-teaser{background:var(--ink);color:rgba(255,255,255,.85);border-radius:24px;padding:3.5rem;position:relative;overflow:hidden;isolation:isolate}
.app-teaser::before{content:"";position:absolute;inset:0;background:url("Bilder/rahmen.jpg") center/cover;opacity:.16;z-index:-1}
.app-teaser h2{color:#fff}
@media(max-width:575px){.app-teaser{padding:2rem 1.4rem}}
.phone{width:min(250px,72%);margin:0 auto;aspect-ratio:9/18;border-radius:34px;border:8px solid #0c0d10;background:#000 url("Bilder/fluegel.jpg") center 35%/cover;position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(196,160,90,.65)}
.phone::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.8))}
.phone .p-chips{position:absolute;top:12px;left:10px;right:10px;z-index:2;display:flex;flex-wrap:wrap;gap:4px}
.phone .p-chips span{font-size:.58rem;background:rgba(255,255,255,.9);color:var(--ink);border-radius:999px;padding:.05rem .5rem}
.phone .p-chips span.ok{background:var(--gold)}
.phone .p-msg{position:absolute;left:10px;right:10px;bottom:12px;z-index:2;background:rgba(20,22,27,.9);border:1px solid rgba(196,160,90,.55);border-radius:12px;padding:.55rem .7rem;font-size:.7rem;line-height:1.4;color:#fff}
.video-box{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#0c0d10;box-shadow:var(--shadow);border:1px solid rgba(196,160,90,.55)}
.video-box video{width:100%;height:100%;object-fit:contain;display:block;background:#0c0d10}
.video-soon{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;color:#fff;text-align:center;padding:1.2rem;background-size:cover;background-position:center}
.video-box.is-missing video{display:none}.video-box.is-missing .video-soon{display:flex}
.video-soon span{font-size:.9rem;color:rgba(255,255,255,.8)}
.kc-hint{display:flex;gap:.7rem;align-items:flex-start;border:1px solid rgba(196,160,90,.55);background:rgba(255,255,255,.08);border-radius:14px;padding:.9rem 1.1rem;margin-top:1.6rem;font-size:.92rem;max-width:560px;color:#fff}
.kc-hint .ic{color:var(--gold-2);margin-top:.25rem;flex:none}
.kc-step{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;height:100%;position:relative;box-shadow:var(--shadow-sm)}
.kc-step img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.kc-step .kc-body{padding:1.5rem 1.4rem 1.6rem}.kc-step .kc-body p{font-size:.93rem;margin:0;color:var(--muted)}
.kc-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--ink);font:500 1.4rem var(--serif);border:3px solid #fff;margin:-46px 0 .6rem;position:relative}
.kc-crit{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);height:100%}
.kc-crit img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.kc-crit div{padding:1.3rem 1.4rem}.kc-crit p{font-size:.92rem;color:var(--muted);margin:.3rem 0 0}
.kc-no{list-style:none;padding:0;margin:0}.kc-no li{position:relative;padding:.8rem 0 .8rem 1.9rem;border-bottom:1px solid var(--line)}.kc-no li:before{content:"–";position:absolute;left:.4rem;color:var(--gold-dark);font-weight:700}