/* ============================================================
   HUNDERTMARK.COACH — Zusatz-Styles zur gemeinsamen Basis
   (styles.css = Design-System von nedahundertmark.com)
   ============================================================ */

/* ---- Schmerzpunkte (6 Bremsen) ---- */
.schmerz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.schmerz{
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r);
  padding:1.7rem 1.5rem;transition:transform .3s ease,border-color .3s;
}
.schmerz:hover{transform:translateY(-4px);border-color:var(--amber)}
.schmerz h3{font-size:1.35rem;color:var(--cream);margin-bottom:.5rem}
.schmerz h3 em{font-style:italic;color:var(--amber);font-size:1rem;margin-right:.4rem;letter-spacing:.06em}
.schmerz p{font-size:.93rem;color:var(--muted-dark)}

/* „Weg von … hin zu …“-Zeile */
.wegzu{
  margin-top:2.8rem;text-align:center;font-family:var(--serif);
  font-size:clamp(1.3rem,2.8vw,1.8rem);line-height:1.5;color:var(--cream);
}
.wegzu .von{color:var(--muted-dark)}
.wegzu em{font-style:italic;color:var(--amber)}

/* ---- HANDELN-Buchstaben ---- */
.letters{display:grid;grid-template-columns:repeat(7,1fr);gap:.8rem;margin-top:2.4rem}
.letter{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:1.15rem .6rem 1rem;text-align:center;transition:transform .3s,border-color .3s;
}
.letter:hover{transform:translateY(-4px);border-color:var(--amber-deep)}
.letter b{display:block;font-family:var(--serif);font-weight:400;font-size:2.1rem;color:var(--amber-deep);line-height:1}
.letter span{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.03em;color:var(--muted);line-height:1.35}
.methode-mehr{margin-top:2rem;text-align:center;font-size:.95rem;color:var(--muted)}
.methode-mehr a{color:var(--amber-deep);font-weight:600;text-decoration:none}
.methode-mehr a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Angebots-Karten (dunkle Karten mit Preis) ---- */
.offer{padding:2.3rem 2.1rem}
.offer h3{font-size:1.75rem}
.offer p{flex:0 0 auto}
.offer .feat{flex:1;margin:.7rem 0 1.4rem}
.offer .feat li{color:var(--muted-dark)}
.offer .feat li b{color:var(--text-dark)}
.offer .price .now{color:var(--cream)}
.offer .price .was{color:var(--muted-dark)}
.offer .price-note{color:var(--muted-dark);margin-bottom:0}
.offer .btn{margin-top:1.4rem;align-self:flex-start}

/* ---- Mini-Produkttreppe ---- */
.treppe-kicker{
  margin-top:3.4rem;text-align:center;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--amber);font-weight:600;
}
.stairs.angebot-stairs{margin-top:1.4rem;grid-template-columns:repeat(4,1fr)}
.angebot-stairs .stair:nth-child(1){min-height:230px}
.angebot-stairs .stair:nth-child(2){min-height:270px}
.angebot-stairs .stair:nth-child(3){min-height:310px}
.angebot-stairs .stair:nth-child(4){min-height:350px}
.treppe-note{margin-top:1.8rem;text-align:center;font-size:.92rem;color:var(--muted-dark)}
.treppe-note a{color:var(--amber);text-decoration:none;font-weight:600}
.treppe-note a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Beweis-Zeile im Zitat-Band ---- */
.quoteband .beweis{
  color:var(--muted-dark);max-width:62ch;margin:0 auto 1.4rem;font-size:1rem;line-height:1.7;
}
.quoteband .qsrc a{color:var(--muted-dark);text-decoration:none}
.quoteband .qsrc a:hover{color:var(--amber)}

/* ---- Footer mit 3 Spalten ---- */
.foot-grid.drei{grid-template-columns:1.3fr 1fr 1.1fr}

/* ---- Responsive ---- */
@media(max-width:960px){
  .schmerz-grid{grid-template-columns:1fr 1fr}
  .letters{grid-template-columns:repeat(4,1fr)}
  .stairs.angebot-stairs{grid-template-columns:1fr 1fr}
  .angebot-stairs .stair{min-height:0!important}
  .foot-grid.drei{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .schmerz-grid{grid-template-columns:1fr}
  .letters{grid-template-columns:repeat(2,1fr)}
  .stairs.angebot-stairs{grid-template-columns:1fr}
  .offer{padding:1.8rem 1.5rem}
  .foot-grid.drei{grid-template-columns:1fr}
}