/*
  Gemeinsames Stylesheet der Ratgeber-/Landingpages (sprechhilfe.app).
  Bewusst als eigene Datei statt inline wie auf der Startseite: sechs Seiten
  teilen sich denselben Look, und eine Aenderung soll nicht sechsmal gepflegt
  werden. Farbwelt und Typografie exakt wie index.html.
*/
:root{
  --bg:#0f1216; --panel:#171b21; --btn:#232a33; --text:#ffffff;
  --muted:#9aa4b2; --green:#22c55e; --accent:#3b82f6; --border:#2a323c;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.65; font-size:17px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}

/* Kopf: schmale Zeile mit Zurueck-Link, dann Titel */
.top{padding:26px 0 0}
.top a{color:var(--muted); font-size:15px}
header.hero{padding:18px 0 8px}
h1{font-size:clamp(26px,5vw,38px); line-height:1.2; margin:0 0 10px}
.lead{color:var(--muted); font-size:clamp(17px,2.6vw,20px); margin:0 0 8px}

/* Fliesstext */
article{padding:8px 0 30px}
h2{font-size:23px; margin:34px 0 12px; color:var(--green)}
article p{margin:0 0 16px}
article ul{margin:0 0 16px; padding-left:22px}
article li{margin-bottom:8px}
.hint{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; color:var(--muted); font-size:15.5px; margin:20px 0;
}

/* Kasten mit App-Verweis + Button, einmal pro Seite */
.try{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:22px; margin:30px 0; text-align:center;
}
.try p{margin:0 0 14px; color:var(--muted)}
.cta{
  display:inline-block; padding:13px 24px; border-radius:14px;
  font-weight:700; font-size:17px; background:var(--green); color:#05270f;
}
.cta:hover{text-decoration:none; filter:brightness(1.08)}

/* FAQ */
.faq h3{font-size:18px; margin:22px 0 6px}
.faq p{color:var(--muted)}

/* Weiterlesen: Links auf die anderen Ratgeberseiten */
.more{border-top:1px solid var(--border); padding:26px 0}
.more h2{margin-top:0}
.more ul{list-style:none; margin:0; padding:0}
.more li{margin-bottom:10px}

footer{
  border-top:1px solid var(--border); padding:24px 0 44px;
  color:var(--muted); font-size:14.5px; text-align:center;
}
footer a{color:var(--muted)}