/* pxMEDIA.de — Ratgeber (Paket B3, 23.09.2026)
   Übersicht, Kategorieseiten und Beitragsvorlage. Eingebunden über META
   extraKopf; Tokens aus tokens.css, Grundklassen (kicker, knopf, sektion,
   ebene, mehr) aus basis.css. Kein data-reveal in den Ratgeber-Modulen —
   der Inhalt muss auch in Idas Fenster ohne Skript lesbar sein. */

/* ---- Kategorien: Karten (Übersicht) ---- */
.ratgeber-kategorien{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.ratgeber-kategorie{display:flex;flex-direction:column;gap:.6rem;min-height:100%;
  padding:1.7rem 1.5rem 1.4rem;border:1px solid var(--c-linie);border-radius:var(--radius);
  background:rgba(30,30,30,.72);color:var(--c-text);text-decoration:none;
  transition:transform .35s var(--kurve),border-color .35s}
.ratgeber-kategorie:hover,.ratgeber-kategorie:focus-visible{transform:translateY(-4px);border-color:#f2950e66;outline:none}
.ratgeber-kategorie h3{margin:0;font-size:1.2rem;line-height:1.25}
.ratgeber-kategorie p{margin:0;flex:1;color:var(--c-text-2);font-size:.95rem;line-height:1.5}
.ratgeber-kategorie__zahl{font-size:var(--fs-klein);font-weight:700;letter-spacing:.04em;color:var(--c-orange)}
.ratgeber-kategorie--aktiv{border-color:var(--c-orange)}
@media(max-width:1100px){.ratgeber-kategorien{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ratgeber-kategorien{grid-template-columns:minmax(0,1fr)}}

/* ---- Kategorien: Chips (Kategorieseiten) ---- */
.ratgeber-chips{padding:0 clamp(1.25rem,4vw,3rem) var(--raum-sektion)}
.ratgeber-chips__titel{margin:0 0 .8rem;font-size:var(--fs-klein);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--c-orange)}
.ratgeber-chips__liste{display:flex;flex-wrap:wrap;gap:.6rem}
.ratgeber-chip{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.1rem;
  border:1px solid var(--c-linie);border-radius:999px;color:var(--c-text);text-decoration:none;
  font-size:.95rem;font-weight:700;transition:border-color .3s,background .3s}
.ratgeber-chip:hover,.ratgeber-chip:focus-visible{border-color:#f2950e99;background:rgba(242,149,14,.08);outline:none}
.ratgeber-chip--aktiv{border-color:var(--c-orange);background:var(--c-orange);color:#151515}

/* ---- Beitragsliste ---- */
.ratgeber-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.ratgeber-karte{border:1px solid var(--c-linie);border-radius:var(--radius);background:rgba(30,30,30,.72);
  overflow:hidden;transition:transform .35s var(--kurve),border-color .35s}
.ratgeber-karte:hover{transform:translateY(-4px);border-color:#f2950e66}
.ratgeber-karte>a{display:flex;flex-direction:column;height:100%;padding:1.8rem 1.6rem;color:var(--c-text);text-decoration:none}
.ratgeber-karte__bild{width:calc(100% + 3.2rem);margin:-1.8rem -1.6rem 1.2rem;aspect-ratio:16/9;object-fit:cover;display:block}
.ratgeber-karte__meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0 0 .6rem;font-size:var(--fs-klein);color:var(--c-text-2)}
.ratgeber-karte__meta span{color:var(--c-orange);font-weight:700;letter-spacing:.04em}
.ratgeber-karte h3{margin:0 0 .6rem;font-size:1.25rem;line-height:1.25}
.ratgeber-karte__anriss{flex:1;margin:0;color:var(--c-text-2);font-size:.98rem;line-height:1.55}
.ratgeber-karte .mehr{margin-top:1.2rem}
.ratgeber-leer{margin-top:1.6rem}
.ratgeber-leer a,.ratgeber-liste__zurueck a,.ratgeber-liste__mehr a{color:var(--c-orange);font-weight:700}
.ratgeber-liste__mehr,.ratgeber-liste__zurueck{margin-top:2.2rem;color:var(--c-text-2)}
@media(max-width:1000px){.ratgeber-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ratgeber-karten{grid-template-columns:minmax(0,1fr)}}

/* ---- Beitrag ---- */
.beitrag{max-width:72ch;margin:0 auto;padding:150px clamp(1.25rem,4vw,3rem) var(--raum-sektion);
  font-size:var(--fs-text);line-height:1.7}
.beitrag__kopf{margin-bottom:2.2rem}
.beitrag__pfad ol{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;
  font-size:var(--fs-klein);color:var(--c-text-2)}
.beitrag__pfad li+li::before{content:"›";margin-right:.35rem;color:var(--c-lila)}
.beitrag__pfad a{color:var(--c-text-2)}
.beitrag__pfad [aria-current]{color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}
.beitrag__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0 0 1rem;
  font-size:var(--fs-klein);color:var(--c-text-2)}
.beitrag__kategorie{color:var(--c-orange);font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.beitrag__kategorie:hover{text-decoration:underline}
.beitrag h1{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 1.2rem}
.beitrag__vorspann{font-weight:300;font-size:var(--fs-lead);line-height:1.55;color:var(--c-text);margin:0}
.beitrag__bild{margin:2rem 0 0}
.beitrag__bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);display:block}
.beitrag h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;margin:2.6rem 0 .9rem}
.beitrag h3{font-size:1.15rem;margin:1.8rem 0 .5rem}
.beitrag p,.beitrag li{color:var(--c-text)}
.beitrag p{margin:0 0 1.1rem}
.beitrag ul,.beitrag ol{padding-left:1.3rem;margin:0 0 1.2rem}
.beitrag li{margin:.35rem 0}
.beitrag li::marker{color:var(--c-orange)}
.beitrag strong,.beitrag b{font-weight:900}
.beitrag a{color:var(--c-orange)}
.beitrag .knopf{color:#151515}  /* Knopf im CTA-Kasten: die Link-Regel darüber färbte die Knopfschrift orange auf orange (Befund 24.09.2026, galt auch für die Musterseite) */
.beitrag blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--c-lila);font-style:italic;color:var(--c-text-2)}

/* CTA-Kasten nach dem Vorspann (Muster michael-selck.de, class post-cta) */
.post-cta{margin:2.4rem 0 .6rem;padding:1.8rem 1.7rem;border:1px solid #f2950e55;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(242,149,14,.14),rgba(84,2,166,.10) 70%,rgba(30,30,30,.7));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.post-cta__kurz{margin:0 0 .5rem;font-size:var(--fs-klein);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--c-orange)}
.post-cta__frage{margin:0 0 .6rem;font-size:1.3rem;font-weight:900;line-height:1.25}
.post-cta__text{margin:0 0 1.2rem;color:var(--c-text-2)}
.post-cta__wege{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin:0}
.post-cta__telefon{color:var(--c-text);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.post-cta__telefon:hover{color:var(--c-orange)}

.beitrag__fazit{margin-top:2.4rem;padding:1.6rem 1.7rem;border-radius:var(--radius);background:rgba(30,30,30,.72);border:1px solid var(--c-linie)}
.beitrag__fazit h2{margin-top:0}
.beitrag__fazit p:last-child{margin-bottom:0}

/* FAQ im Beitrag: H3 + Absatz, ohne Akkordeon — alles sichtbar, damit KI-Suche
   und Screenreader jede Antwort lesen; Auszeichnung als FAQPage im JSON-LD. */
.beitrag__faq h3{padding-top:1.2rem;border-top:1px solid var(--c-linie)}
.beitrag__faq h3:first-of-type{margin-top:1rem}
.beitrag__faq p{color:var(--c-text-2)}

.beitrag__schluss{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--c-linie)}
.beitrag__schluss p{color:var(--c-text-2)}
.beitrag__schluss-links{font-size:var(--fs-klein)}

@media(max-width:820px){
  .beitrag{padding-top:120px}
  .post-cta{padding:1.4rem 1.2rem}
  .post-cta__wege .knopf{width:100%;text-align:center}
  .beitrag__fazit{padding:1.3rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){
  .ratgeber-kategorie,.ratgeber-karte,.ratgeber-chip{transition:none}
  .ratgeber-kategorie:hover,.ratgeber-karte:hover{transform:none}
}