/* =========================================================
   Lese-Erlebnis: Titelbilder, Artikelkarten, Inhaltsverzeichnis,
   Lesefortschritt, Seitenleiste. Für Ratgeber, Artikel, Leistungsseiten
   und die Ratgeber-Vorschau auf der Startseite.
   ========================================================= */

/* Lesefortschritt */
.rprog{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none}
.rprog i{display:block;height:100%;background:linear-gradient(90deg,#2f5bea,#2f5bea);transform-origin:0 50%;transform:scaleX(var(--p,0));box-shadow:0 0 12px #2f5beaaa}
body.admin-bar .rprog{top:32px}

/* Titelbild */
.cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#fbf8f3;isolation:isolate}
.cover svg,.cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.cover .chip{position:absolute;left:16px;bottom:14px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:99px;font:500 12px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.01em;color:#14213d;background:#0b0c10b3;border:1px solid #14213d24;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cover .chip .ic{width:14px;height:14px;color:var(--hue,#2f5bea)}
.cover .cv-ic{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}

/* Artikelkarte (eigenständig, damit sie auch auf der Verwaltersicher-Startseite funktioniert) */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rcard{display:flex!important;flex-direction:column;padding:0!important;min-height:0!important;overflow:hidden;background:#ffffff;border:1px solid #14213d14;border-radius:24px;text-decoration:none;color:#14213d;transition:border-color .35s,transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.rcard:hover{border-color:#14213d3a;transform:translateY(-5px);box-shadow:0 30px 60px -30px #2f5bea66}
.rcard:hover .cover svg,.rcard:hover .cover img{transform:scale(1.06)}
.rcard .rbody{display:flex;flex-direction:column;flex:1;padding:22px 26px 24px}
.rcard h2,.rcard h3{font-family:"Inter Display",Inter,system-ui,sans-serif;font-size:21px!important;font-weight:600;letter-spacing:-.022em;line-height:1.22;margin:0 0 10px!important;color:#14213d}
.rcard p{color:#5a6272;font-size:15px;line-height:1.55;margin:0}
.rcard .rmore{display:flex!important;justify-content:space-between;align-items:center;gap:10px;margin-top:auto!important;padding-top:20px;font-size:14px}
.rcard .rmore b{font-weight:500;color:#14213d}
.rcard .rmore small{font-size:12px;color:#6c7280;letter-spacing:.02em}
.rcard:hover .rmore b{color:#2f5bea}
.rcard.big{grid-column:span 2}
.rcard.big .cover{aspect-ratio:21/9}
.rcard.big h2{font-size:clamp(24px,2.4vw,32px)!important}
main .related .rgrid{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 0 60px}
@media (max-width:1000px){.rgrid,main .related .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rgrid,main .related .rgrid{grid-template-columns:minmax(0,1fr)}.rcard.big{grid-column:auto}.rcard.big .cover{aspect-ratio:16/9}}

/* Ratgeber-Übersicht: Themenfilter */
.rfilter{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0}
.rfilter button{font:500 14px Inter,system-ui,sans-serif;color:#36405a;background:transparent;border:1px solid #14213d26;border-radius:99px;padding:9px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .25s,color .25s,border-color .25s}
.rfilter button .ic{width:15px;height:15px}
.rfilter button i{font-style:normal;font-size:12px;color:#6c7280}
.rfilter button:hover{border-color:#14213d66;color:#14213d}
.rfilter button.on{background:#14213d;color:#fbf8f3;border-color:#14213d}.rfilter button.on i{color:#c7cdd8}
.rgrid .rcard.hide{display:none!important}
.rgrid.filtered .rcard.big{grid-column:auto}.rgrid.filtered .rcard.big .cover{aspect-ratio:16/9}
.rgrid .rcard{animation:rin .6s cubic-bezier(.16,1,.3,1) both}
@keyframes rin{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.rgrid .rcard{animation:none}.cover svg,.cover img{transition:none}}

/* Artikel & Leistungsseite: Text + mitlaufende Seitenleiste */
.rlay{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.rside{display:none}
@media (min-width:1120px){
  .rlay{grid-template-columns:minmax(0,760px) 280px;gap:64px;justify-content:space-between;align-items:start}
  .rlay .art{max-width:none;margin:0}
  .rlay .lbody{max-width:none}
  .rside{display:flex;flex-direction:column;gap:14px;position:sticky;top:104px;padding-top:6px}
  .tocm{display:none!important}
}
.toc .toct{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6c7280;margin-bottom:12px;font-weight:500}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t;border-left:1px solid #14213d1f}
.toc li{counter-increment:t}
.toc a{position:relative;display:block;padding:7px 0 7px 16px;font-size:14px;line-height:1.4;color:#5a6272;text-decoration:none;transition:color .25s}
.toc a::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;border-radius:2px;background:#2f5bea;transform:scaleY(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.toc a:hover{color:#14213d}
.toc a.on{color:#14213d}.toc a.on::before{transform:none}
.tocm{margin:8px 0 34px;border:1px solid #14213d1f;border-radius:18px;background:#ffffff}
.tocm summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
.tocm summary::-webkit-details-marker{display:none}
.tocm summary::after{content:"+";font-size:20px;color:#6c7280;transition:transform .3s}
.tocm[open] summary::after{transform:rotate(45deg)}
.tocm .toc{padding:0 20px 16px}.tocm .toct{display:none}
.prose h2[id]{scroll-margin-top:100px}

/* Ansprechpartner-Karte in der Seitenleiste */
.rme{padding:20px;border-radius:22px;background:linear-gradient(160deg,#2f5bea24,#ffffff 60%);border:1px solid #14213d1c}
.rme .who{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.rme .who img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px #2f5bea40}
.rme .who b{display:block;font-size:15px;color:#14213d}
.rme .who small{display:block;font-size:12.5px;color:#2f5bea;line-height:1.35;margin-top:2px}
.rme p{font-size:14px!important;line-height:1.5!important;color:#4a5363!important;margin:0 0 16px!important}
.rme .pill{width:100%;justify-content:center;background:#14213d!important;color:#fbf8f3!important}
.rme .tel{display:block;text-align:center;margin-top:10px;font-size:13.5px;color:#36405a;text-decoration:none}
.rme .tel:hover{color:#14213d}

/* Titelbild im Artikel */
.acover{display:block;aspect-ratio:3.2/1;border-radius:24px;border:1px solid #14213d14;margin:0 0 30px}
@media (max-width:640px){.acover{aspect-ratio:2/1;border-radius:18px}}

/* Startseiten-Vorschau (Verwaltersicher) */
.rteaser{padding:40px 40px 140px;border-bottom:1px solid #14213d1f;margin-bottom:60px}
.rteaser .rth{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:56px}
.rteaser .rth h2{font-family:"Inter Display",Inter,sans-serif;font-size:clamp(40px,5vw,80px);font-weight:600;letter-spacing:-.04em;line-height:1.02;color:#14213d;margin:0}
.rteaser .rth h2 span{color:#8f8477}
.rteaser .eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#6c7280;margin-bottom:18px;font-weight:500}
.rteaser .all{flex:none;display:inline-flex;align-items:center;gap:8px;color:#14213d;text-decoration:none;font:600 14px Inter,sans-serif;padding:11px 18px;border-radius:99px;box-shadow:inset 0 0 0 1px #14213d40;transition:background .25s}
.rteaser .all:hover{background:#14213d14}
@media (max-width:700px){.rteaser{padding:20px 20px 90px}.rteaser .rth{flex-direction:column;align-items:flex-start}}

/* „Weitere Themen“ auf dem Handy als wischbare Zeile */
@media (max-width:640px){
  .lstrip div{flex-wrap:nowrap!important;overflow-x:auto;margin:0 -20px;padding:0 20px 6px;scroll-snap-type:x proximity;scrollbar-width:none}
  .lstrip div::-webkit-scrollbar{display:none}
  .lstrip a{flex:none;white-space:nowrap;scroll-snap-align:start}
}

/* 1.4.0 – helle Farbwelt */
.rprog i{background:linear-gradient(90deg,#2f5bea,#e8774a);box-shadow:none}
.cover{background:#f7f2ea}
.cover .chip{background:#ffffffd9;color:#14213d;border-color:#14213d14}
.cover .chip .ic{color:var(--hue,#2f5bea)}
.rcard{background:#fff;border-color:#14213d12;color:#14213d;box-shadow:0 18px 44px -34px #14213d55}
.rcard:hover{border-color:#14213d26;box-shadow:0 34px 70px -38px #14213d73}
.rcard h2,.rcard h3,.rcard .rmore b{color:#14213d}
.rcard p{color:#5a6272}
.rcard:hover .rmore b{color:#2f5bea}
.rcard .rmore small{color:#6c7280}
.rcard .cover{border-bottom:1px solid #14213d0d}
.rfilter button{background:#fff;color:#3f4858;border-color:#14213d1f}
.rfilter button:hover{border-color:#14213d66;color:#14213d}
.rfilter button.on{background:#14213d;color:#fff;border-color:#14213d}.rfilter button.on i{color:#a9b5cc}
.rfilter button .ic{color:var(--hue,#2f5bea)}.rfilter button.on .ic{color:#fff}
.toc ol{border-left-color:#14213d1a}
.toc a{color:#6c7280}.toc a:hover,.toc a.on{color:#14213d}
.toc a::before{background:#e8774a}
.toc .toct{color:#8a8f9a}
.tocm{background:#fff;border-color:#14213d14}
.rme{background:linear-gradient(160deg,#2f5bea,#1f3fae);border:0;box-shadow:0 30px 60px -34px #2f5bea99}
.rme .who b{color:#fff}.rme .who small{color:#cdd8ff}
.rme .who img{box-shadow:0 0 0 3px #ffffff40}
.rme p{color:#dfe6ff!important}
.rme .pill{background:#fff!important;color:#14213d!important}
.rme .tel{color:#dfe6ff}.rme .tel:hover{color:#fff}
.acover{border-color:#14213d12}
