/* PianoCheck: 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}
.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}

/* PianoCheck: Die vier App-Screenshots vollständig und klar gerahmt darstellen */
#ablauf .kc-step {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(145, 119, 73, .34);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(20, 22, 27, .09);
}

#ablauf .kc-step > img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 420px;
  min-height: 420px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  background: linear-gradient(145deg, #f8f5ef 0%, #eee7da 100%);
  border-bottom: 1px solid rgba(145, 119, 73, .28);
}

#ablauf .kc-step .kc-body {
  flex: 1 0 auto;
  padding: 1.35rem 1.25rem 1.5rem;
}

#ablauf .kc-step .kc-n {
  margin-top: -42px;
  margin-bottom: .7rem;
  box-shadow: 0 2px 8px rgba(20, 22, 27, .12);
}

@media (min-width: 992px) {
  #ablauf .kc-step > img {
    height: 440px;
    min-height: 440px;
    padding: 4px;
  }
}

@media (max-width: 575px) {
  #ablauf .kc-step > img {
    height: 400px;
    min-height: 400px;
    padding: 4px;
  }
}

/* Beispielbilder des Berichts */
.hero-shot{margin:0;text-align:center}.hero-shot img{width:100%;max-width:380px;height:auto;border-radius:22px;border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow)}.hero-shot figcaption{margin-top:.6rem;font-size:.85rem;color:rgba(255,255,255,.75)}
#sparen .total{flex-wrap:wrap;gap:.2rem 1rem}#sparen .total span:last-child{white-space:nowrap}

/* ===== Überarbeitung Optik: kompakter, Mehrwert früh, weniger Höhe (keine neuen Inhalte) ===== */
.hero.shop-hero h1{font-size:clamp(1.9rem,4vw,2.85rem);line-height:1.14;margin:.8rem 0 1rem}
.hero.shop-hero h1 em{display:block;font-size:.58em;line-height:1.3;font-weight:400;margin-top:.6rem}
.hero.shop-hero .hero-text{font-size:1.02rem;max-width:600px}
.hero-shot img{max-width:290px}
main .section.kc-tight{padding:64px 0}
main .section.kc-tight .section-head{margin-bottom:36px}
main .section.kc-tight .section-head h2{font-size:clamp(1.6rem,3.1vw,2.2rem)}
main .section.kc-tight .section-head p{font-size:1rem}
/* Mehrwert-Band direkt unter dem Kopfbereich */
.kc-value{padding:56px 0;background:linear-gradient(180deg,#fbf6ea 0%,#fff 100%);border-bottom:1px solid var(--line)}
.kc-value-head{text-align:center;max-width:780px;margin:0 auto 34px}
.kc-value-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.8rem 0 0;line-height:1.2}
.kc-v{height:100%;text-align:center;padding:0 .6rem}
.kc-v .icon-badge{margin:0 auto 1rem;background:#fff;border:1px solid rgba(196,160,90,.6);box-shadow:var(--shadow-sm)}
.kc-v h3{font-size:1.2rem;margin-bottom:.5rem}
.kc-v p{margin:0;font-size:.95rem;color:var(--muted)}
@media(min-width:768px){.kc-value .col-md-4+.col-md-4 .kc-v{border-left:1px solid rgba(196,160,90,.4)}}
/* Beispielrechnung näher an die Preise */
#sparen.kc-tight{padding-top:56px;padding-bottom:20px}
/* Preise */
#preise.kc-tight .price-card{padding:1.8rem 1.6rem}
/* Für wen */
#fuer-wen .card-x{padding:1.5rem 1.4rem}#fuer-wen .card-x:hover,#wert .card-x:hover{transform:none;box-shadow:none}
#fuer-wen .card-x h3{font-size:1.15rem}
/* Was den Wert bestimmt: schlanke Karten */
#wert .card-x{padding:1.1rem 1.2rem;background:var(--cream);border:0;border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
#wert .card-x h3{font-size:1.05rem;margin-bottom:.35rem}#wert .card-x p{font-size:.9rem}
/* Was geprüft wird */
.kc-crit div{padding:1rem 1.1rem}.kc-crit h3{font-size:1.05rem}.kc-crit p{font-size:.88rem}
.kc-crit img{aspect-ratio:16/9}
/* FAQ */
#faq .accordion-button{font-size:1.05rem;padding:1rem 1.3rem}#faq .accordion-body{padding:1rem 1.3rem 1.3rem;font-size:.95rem}
/* Grenzen */
#grenzen .kc-no li{padding:.6rem 0 .6rem 1.8rem;font-size:.94rem}
/* Schluss-Aufruf */
.kc-cta{background:var(--ink);color:rgba(255,255,255,.85);text-align:center;padding:56px 0}
.kc-cta h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);max-width:760px;margin:0 auto .8rem;line-height:1.25}
.kc-cta p{margin:0 0 1.4rem;color:rgba(255,255,255,.75)}
/* Handy: Schritte und Prüfpunkte als wischbare Reihe statt langer Spalte */
@media(max-width:767px){
  main .section.kc-tight{padding:44px 0}
  .kc-value{padding:40px 0}
  #ablauf .row,#erkennt .row{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.8rem;margin-right:-12px}
  #ablauf .row>[class*=col],#erkennt .row>[class*=col]{flex:0 0 78%;max-width:78%;scroll-snap-align:center}
  #ablauf .kc-step>img{height:340px;min-height:340px}
  .kc-v{padding:0}.kc-v+.kc-v{margin-top:0}
}
.price-card .ribbon{white-space:nowrap}
@media(max-width:767px){.kc-v{margin-bottom:.6rem}}