/* Ratgeber: Uebersicht, Artikel und der Einbau-Block fuer andere Seiten.
   Farben und Schriften wie die Luxus-Seite. Der Einbau-Block (.rg-block) bringt alles mit, was er braucht. */
@font-face{font-family:"Newsreader";src:url("/assets/f/newsreader-latin-light.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/f/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/f/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/f/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.rg-seite,.rg-block{--rg-kalk:#F4F4F2;--rg-russ:#1D1C1A;--rg-altholz:#6B5443;--rg-klein:#55524C;--rg-linie:#D9D7D1;
  --rg-display:"Newsreader",Georgia,serif;--rg-text:"IBM Plex Sans",system-ui,sans-serif;--rg-mono:"IBM Plex Mono",ui-monospace,monospace}
.rg-seite{margin:0;background:var(--rg-kalk);color:var(--rg-russ);font:400 18px/1.6 var(--rg-text);-webkit-font-smoothing:antialiased}
.rg-seite *,.rg-block *{box-sizing:border-box}
.rg-seite a{color:inherit;text-underline-offset:3px}
.rg-seite :focus-visible,.rg-block :focus-visible{outline:3px solid #0B5FA5;outline-offset:3px}
.rg-wrap{max-width:1216px;margin:0 auto;padding-inline:clamp(16px,4vw,56px)}
.rg-kopf{border-bottom:1.5px solid var(--rg-altholz)}
.rg-kopf .rg-wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-block:14px}
.rg-marke{font:300 20px/1.2 var(--rg-display);text-decoration:none}
.rg-kopf nav{display:flex;gap:20px;align-items:center;font-size:15px}
.rg-cta-klein{border:1px solid var(--rg-russ);padding:8px 14px;border-radius:2px;text-decoration:none;font-weight:500}
.rg-ort{font:400 12.5px/1.5 var(--rg-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--rg-altholz);margin:0}
.rg-seite h1{font:300 clamp(34px,4.6vw,60px)/1.06 var(--rg-display);letter-spacing:-.01em;margin:12px 0 0;max-width:20ch;text-wrap:balance}
.rg-lead{font-size:clamp(19px,1.6vw,22px);line-height:1.5;max-width:56ch;margin:20px 0 0}
.rg-artikel,.rg-uebersicht{padding-block:clamp(40px,7vh,88px) clamp(56px,9vh,112px)}
.rg-bild{margin:clamp(28px,5vh,56px) 0 0}
.rg-bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rg-spalten{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);margin-top:clamp(36px,6vh,72px);align-items:start}
.rg-blick{border-top:1.5px solid var(--rg-altholz);padding-top:16px;position:sticky;top:24px}
.rg-blick h2{font:300 24px/1.2 var(--rg-display);margin:0 0 6px}
.rg-blick dl{margin:0}
.rg-blick dl div{padding:11px 0;border-bottom:1px solid var(--rg-linie)}
.rg-blick dt{font:400 12px/1.4 var(--rg-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--rg-klein)}
.rg-blick dd{margin:3px 0 0;font-size:16.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.rg-text{max-width:62ch}
.rg-text h2{font:300 clamp(26px,2.6vw,34px)/1.15 var(--rg-display);margin:44px 0 12px;text-wrap:balance}
.rg-text h2:first-child{margin-top:0}
.rg-text p{margin:0 0 14px}
.rg-stand{font-size:14.5px;line-height:1.55;color:var(--rg-klein);margin-top:36px !important;padding-top:14px;border-top:1px solid var(--rg-linie)}
.rg-aufruf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end;margin-top:clamp(56px,9vh,112px);padding-block:clamp(28px,4vh,44px);border-block:1.5px solid var(--rg-altholz)}
.rg-aufruf h2{font:300 clamp(28px,3.4vw,46px)/1.08 var(--rg-display);margin:0;max-width:18ch;text-wrap:balance}
.rg-aufruf p{margin:0}
.rg-knoepfe{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:18px !important}
.rg-cta{display:inline-block;background:var(--rg-russ);color:var(--rg-kalk) !important;text-decoration:none;font-weight:500;font-size:16px;padding:14px 22px;border-radius:2px;min-height:48px}
.rg-leise{font-size:16px;font-weight:500}
.rg-mehr{margin-top:clamp(48px,8vh,96px)}
.rg-mehr h2,.rg-block h2{font:300 clamp(26px,2.6vw,34px)/1.15 var(--rg-display);margin:0 0 20px}
.rg-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(24px,3vw,44px)}
.rg-uebersicht .rg-karten{margin-top:clamp(36px,6vh,64px)}
.rg-karte{display:grid;gap:8px;align-content:start;text-decoration:none;color:inherit}
.rg-karte img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:6px}
.rg-karte b{font:300 24px/1.2 var(--rg-display);text-wrap:balance}
.rg-karte:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.rg-kurz{font-size:16px;line-height:1.5;color:var(--rg-klein)}
.rg-fuss{border-top:1px solid var(--rg-linie);padding-block:28px 40px;font-size:14.5px;color:var(--rg-klein)}
.rg-fuss p{margin:0 0 8px}
/* Einbau-Block */
.rg-block{padding-block:clamp(40px,7vh,88px);color:var(--rg-russ);font-family:var(--rg-text)}
.rg-block .rg-kopfzeile{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.rg-block .rg-alle{font-size:16px;font-weight:500;color:inherit;text-underline-offset:3px}
/* Im Einbau-Block steht jede Karte in ihrer eigenen Spalte, so viele, wie data-anzahl sagt.
   Mittlere Breite: 2 nebeneinander, weitere ausgeblendet, damit keine halbe Reihe entsteht. */
.rg-block .rg-karten{grid-template-columns:repeat(var(--rg-n,3),minmax(0,1fr))}
@media (max-width:1000px){.rg-block .rg-karten{grid-template-columns:repeat(2,minmax(0,1fr))}.rg-block .rg-karte:nth-child(n+3){display:none}}
@media (max-width:620px){.rg-block .rg-karten{grid-template-columns:1fr}.rg-block .rg-karte:nth-child(n+3){display:grid}}
@media (max-width:900px){
  .rg-spalten,.rg-aufruf{grid-template-columns:1fr}
  .rg-blick{position:static}
  .rg-kopf nav a:first-child{display:none}
}
@media (prefers-reduced-motion:no-preference){.rg-karte img{transition:opacity .2s}.rg-karte:hover img{opacity:.92}}
