/* Ratgeber, Beiträge und Glossar. Baut auf stil.css auf (Farben, Schriften, Abstände). */

/* ---------- Kopfbereich ---------- */
.rg-held .dank__text h1{max-width:20ch}
.rg-held--liste{padding-bottom:clamp(5.5rem,9vw,8rem)}
.rg-held__text{max-width:820px}
.rg-held__text h1{max-width:none}
.rg-autorzeile{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14)}
.rg-autorzeile img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.25)}
.rg-autorzeile p{margin:0;line-height:1.35}
.rg-autorzeile b{display:block;color:#fff;font-family:var(--schrift-kopf);font-weight:600;font-size:.98rem}
.rg-autorzeile span{color:rgba(255,255,255,.68);font-size:.88rem}
.rg-autorzeile__daten{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-left:auto !important}
.rg-autorzeile__daten span{white-space:nowrap}
.rg-filter{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 0;padding:0}
.rg-filter a{display:inline-block;padding:.55rem 1.05rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;font-family:var(--schrift-kopf);font-weight:500;font-size:.92rem;transition:background .2s,border-color .2s}
.rg-filter a:hover,.rg-filter a:focus-visible{background:var(--blau);border-color:var(--blau)}

/* ---------- Beitrag ---------- */
.rg-artikel{padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(4rem,7vw,6rem)}
.rg-raster{display:grid;grid-template-columns:260px minmax(0,720px);gap:clamp(2.5rem,5vw,4.5rem);justify-content:center;align-items:start}
.rg-seitenleiste{position:sticky;top:110px;max-height:calc(100vh - 130px);overflow:auto}
.rg-toc{border-left:2px solid var(--nebel-2);padding-left:1.1rem}
.rg-toc__titel{font-family:var(--schrift-kopf);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blau);margin:0 0 .8rem}
.rg-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.rg-toc a{color:var(--text-2);text-decoration:none;font-size:.92rem;line-height:1.4;display:block}
.rg-toc a:hover,.rg-toc a:focus-visible{color:var(--blau)}

.rg-text{min-width:0;font-size:1.09rem;line-height:1.75}
.rg-text h2{font-size:clamp(1.55rem,2.4vw,2rem);line-height:1.18;margin:0 0 .8rem;scroll-margin-top:110px}
.rg-text h3{font-size:clamp(1.12rem,1.5vw,1.25rem);margin:1.8rem 0 .5rem}
.rg-text p{margin:0 0 1.1rem}
.rg-text ul,.rg-text ol{margin:0 0 1.3rem;padding-left:1.3rem}
.rg-text li{margin-bottom:.45rem}
.rg-text li::marker{color:var(--blau)}
.rg-text a{color:var(--blau-dunkel);text-decoration:underline;text-decoration-color:var(--blau-marker);text-underline-offset:.18em;text-decoration-thickness:2px}
.rg-text a:hover{text-decoration-color:var(--blau)}
.rg-text strong{color:var(--kopf)}
.rg-text blockquote{margin:1.6rem 0;padding:1rem 1.4rem;border-left:4px solid var(--blau);background:var(--blau-tint);border-radius:0 var(--radius-k) var(--radius-k) 0;color:var(--kopf)}
.rg-text blockquote p:last-child{margin:0}
.rg-text section{padding-block:0}
.rg-abschnitt{margin-top:clamp(2.6rem,4.5vw,3.4rem)}
.rg-text .rg-kurz{padding:clamp(1.4rem,3vw,2rem)}

.rg-kurz{background:var(--nebel);border:1px solid var(--nebel-2);border-left:4px solid var(--blau);border-radius:var(--radius-k);padding:clamp(1.4rem,3vw,2rem)}
.rg-kurz h2{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blau);margin-bottom:.7rem}
.rg-kurz>p{font-size:1.14rem;color:var(--kopf);line-height:1.6}
.rg-kern{list-style:none;padding:0 !important;margin:1.1rem 0 0 !important;display:grid;gap:.55rem}
.rg-kern li{position:relative;padding-left:1.9rem;margin:0;font-size:1rem;line-height:1.5}
.rg-kern li::before{content:"";position:absolute;left:0;top:.18em;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/.8rem no-repeat}

.rg-tabelle{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--nebel-2);border-radius:12px;-webkit-overflow-scrolling:touch}
.rg-tabelle table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem;line-height:1.5}
.rg-tabelle th,.rg-tabelle td{padding:.75rem .95rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--nebel-2)}
.rg-tabelle th{background:var(--nebel);font-family:var(--schrift-kopf);font-weight:600;color:var(--kopf);font-size:.9rem}
.rg-tabelle tr:last-child td{border-bottom:0}

.rg-faq{border-bottom:1px solid var(--linie)}
.rg-faq:first-of-type{border-top:1px solid var(--linie)}
.rg-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.05rem 0}
.rg-faq summary::-webkit-details-marker{display:none}
.rg-faq summary h3{margin:0;font-size:1.06rem;line-height:1.4}
.rg-faq summary::after{content:"+";flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--blau-tint);color:var(--blau);font-family:var(--schrift-kopf);font-size:1.3rem;transition:transform .25s var(--ease)}
.rg-faq[open] summary::after{transform:rotate(45deg)}
.rg-faq p{margin:0 0 1.2rem;color:var(--text)}

.rg-quellen ol{font-size:.92rem;line-height:1.55;color:var(--text-2)}
.rg-quellen a{word-break:break-word}

.rg-autor{display:flex;gap:1.4rem;align-items:flex-start;margin-top:3rem;padding:1.6rem;border-radius:var(--radius-k);background:var(--nebel);border:1px solid var(--nebel-2)}
.rg-autor img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.rg-autor p{margin:0 0 .5rem;font-size:.98rem;line-height:1.6}
.rg-autor__name{font-family:var(--schrift-kopf);font-weight:700;color:var(--kopf);font-size:1.1rem !important;margin:0 !important}
.rg-autor__rolle{color:var(--text-2);font-size:.9rem !important}
.rg-autor .pfeil{text-decoration:none;color:var(--blau)}

.rg-begriffe{margin-top:1.6rem}
.rg-begriffe__titel{font-family:var(--schrift-kopf);font-weight:600;color:var(--kopf);font-size:.95rem;margin-bottom:.7rem !important}
.rg-begriffe ul{list-style:none;padding:0 !important;display:flex;flex-wrap:wrap;gap:.5rem}
.rg-begriffe li{margin:0}
.rg-begriffe a{display:inline-block;padding:.35rem .8rem;border-radius:999px;background:var(--blau-tint);color:var(--blau-dunkel);text-decoration:none;font-size:.88rem}
.rg-begriffe a:hover{background:var(--blau);color:#fff}

/* ---------- Karten ---------- */
.rg-weiter{padding:clamp(4rem,7vw,6rem) 0}
.rg-weiter__alle{margin-top:2rem}
.rg-bereich{padding:clamp(3.5rem,6vw,5rem) 0 0}
.rg-bereich:last-of-type{padding-bottom:clamp(3.5rem,6vw,5rem)}
.rg-bereich .kopfzeile{margin-bottom:1.8rem}
.rg-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.rg-karte{display:flex;flex-direction:column;background:#fff;border:1px solid var(--nebel-2);border-radius:var(--radius-k);overflow:hidden;box-shadow:var(--schatten-k);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.rg-karte:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.rg-karte__bild{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--nebel)}
.rg-karte__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .5s var(--ease)}
.rg-karte:hover .rg-karte__bild img{transform:scale(1.04)}
.rg-karte__text{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.4rem}
.rg-karte__kat{font-family:var(--schrift-kopf);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);font-weight:700;margin:0 0 .6rem}
.rg-karte__titel{font-size:1.16rem;line-height:1.3;margin:0 0 .6rem}
.rg-karte__titel a{color:var(--kopf);text-decoration:none}
.rg-karte__titel a::after{content:"";position:absolute;inset:0}
.rg-karte{position:relative}
.rg-karte__titel a:hover,.rg-karte__titel a:focus-visible{color:var(--blau)}
.rg-karte__kurz{font-size:.95rem;line-height:1.55;color:var(--text-2);margin:0 0 1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rg-karte__meta{display:flex;align-items:center;gap:.55rem;margin:auto 0 0;font-size:.85rem;color:var(--text-2)}
.rg-karte__meta img{width:28px;height:28px;border-radius:50%;object-fit:cover}

.rg-glossarhinweis{padding:clamp(3.5rem,6vw,5rem) 0}
.rg-glossarhinweis__innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem}
.rg-glossarhinweis h2{margin-bottom:.6rem}

/* ---------- Glossar ---------- */
.gl-abc{position:sticky;top:76px;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.gl-abc ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem;margin:0;padding:.6rem 0}
.gl-abc a,.gl-abc span{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:8px;font-family:var(--schrift-kopf);font-weight:600;font-size:.92rem;text-decoration:none}
.gl-abc a{color:var(--kopf)}
.gl-abc a:hover,.gl-abc a:focus-visible{background:var(--blau);color:#fff}
.gl-abc span{color:rgba(37,34,46,.25)}
.gl-liste{padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,7vw,6rem)}
.gl-gruppe{margin-bottom:2.4rem}
.gl-buchstabe{font-size:clamp(2.2rem,4vw,3rem);color:var(--blau);margin:0 0 .4rem;scroll-margin-top:150px}
.gl-eintrag{padding:1.5rem 0;border-top:1px solid var(--linie);scroll-margin-top:150px}
.gl-eintrag:target{background:var(--blau-tint);margin-inline:-1rem;padding-inline:1rem;border-radius:12px}
.gl-eintrag h3{margin:0 0 .4rem;font-size:clamp(1.18rem,1.8vw,1.38rem)}
.gl-anker{color:var(--kopf);text-decoration:none}
.gl-anker:hover{color:var(--blau)}
.gl-syn{font-size:.88rem;color:var(--text-2);margin:0 0 .5rem}
.gl-kurz{font-size:1.08rem;color:var(--kopf);font-weight:500;margin:0 0 .6rem}
.gl-eintrag p{margin:0 0 .6rem}
.gl-rg{margin:.8rem 0}
.gl-rg p{font-size:.9rem;color:var(--text-2);margin:0 0 .3rem}
.gl-rg ul{margin:0;padding-left:1.2rem}
.gl-rg a,.gl-fuss a{color:var(--blau-dunkel)}
.gl-fuss{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font-size:.86rem;color:var(--text-2);margin:.4rem 0 0 !important}
.gl-fuss a{margin-right:.5rem}
.gl-hinweis{font-size:.88rem;color:var(--text-2);margin-top:2rem}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .rg-raster{grid-template-columns:minmax(0,720px)}
  .rg-seitenleiste{position:static;max-height:none}
  .rg-toc{background:var(--nebel);border:0;border-radius:var(--radius-k);padding:1.2rem 1.4rem}
  .rg-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .rg-held .dank__innen{grid-template-columns:1fr}
  .rg-held .dank__bild{max-width:640px}
}
@media (max-width:640px){
  .rg-karten{grid-template-columns:1fr}
  .rg-autor{flex-direction:column}
  .rg-autorzeile__daten{margin-left:0 !important;width:100%}
  .rg-text{font-size:1.04rem}
  .gl-abc{top:64px}
  .gl-abc ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gl-abc a,.gl-abc span{flex:none;width:2rem;height:2rem;font-size:.88rem}
}
.gl-gruppe{padding:0}

/* Übersicht im Stil des WOHLverde-Ratgebers: kompakter Kopf, Glossar-Leiste, ein Raster */
.rg-held--kompakt{padding-top:8.5rem;padding-bottom:clamp(4.5rem,7vw,6rem)}
.rg-held--kompakt h1{font-size:clamp(2.1rem,4vw,3.2rem);margin:.3rem 0 .9rem}
.rg-liste{padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,7vw,6rem)}
.rg-glossarleiste{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.4rem;margin-bottom:clamp(1.4rem,3vw,2rem);border-radius:var(--radius-k);background:linear-gradient(120deg,var(--tinte-2),var(--tinte));color:#fff;text-decoration:none;box-shadow:var(--schatten-k);transition:transform .25s var(--ease)}
.rg-glossarleiste:hover{transform:translateY(-2px)}
.rg-glossarleiste__icon{flex:none;width:2.8rem;height:2.8rem;border-radius:12px;display:grid;place-items:center;background:var(--blau)}
.rg-glossarleiste__icon svg{width:1.4rem;height:1.4rem;fill:#fff}
.rg-glossarleiste__text{display:flex;flex-direction:column;line-height:1.3}
.rg-glossarleiste__text small{font-family:var(--schrift-kopf);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blau-hell);font-weight:700}
.rg-glossarleiste__text b{font-family:var(--schrift-kopf);font-size:1.12rem}
.rg-glossarleiste__text span{font-size:.9rem;color:rgba(255,255,255,.7)}
.rg-glossarleiste__pfeil{margin-left:auto;font-size:1.4rem;color:var(--blau-hell);transition:transform .25s var(--ease)}
.rg-glossarleiste:hover .rg-glossarleiste__pfeil{transform:translateX(5px)}
.rg-karte__kurz{-webkit-line-clamp:2}
.rg-karte__mehr{font-family:var(--schrift-kopf);font-weight:600;font-size:.92rem;color:var(--blau);margin:.9rem 0 0}
.rg-karte__mehr::after{content:" →";transition:margin .25s var(--ease)}
.rg-karte:hover .rg-karte__mehr::after{margin-left:4px}