/* ==========================================================================
   upclients · Ratgeber-Übersicht
   Kopf (dunkel) + vier Artikelkarten (hell). Klassen tragen das Präfix rgo-.
   ========================================================================== */

/* Hell von Anfang an (Aaron 21.10.); die Höhenlinien zeichnet seiten.js über die ganze Seite */
.rgo-hero .glow{background-image:linear-gradient(100deg,var(--p800) 0%,var(--p600) 30%,var(--p800) 60%,var(--p700) 100%)}
.rgo-hero{position:relative;color:var(--i950);overflow:clip;isolation:isolate;padding:calc(var(--hdr) + clamp(30px,7vh,80px)) 0 clamp(70px,11vh,120px)}
.rgo-hero::before{content:"";position:absolute;left:50%;bottom:-6%;width:150vw;height:70vh;transform:translateX(-50%);background:radial-gradient(48% 40% at 50% 70%,rgba(121,164,242,.1),rgba(92,136,215,.035) 48%,rgba(92,136,215,0) 74%);pointer-events:none;z-index:-1;animation:dawn 9s ease-in-out infinite alternate}
.rgo-eb{color:var(--p700);letter-spacing:.2em}
.rgo-title{margin-top:24px;max-width:16ch;font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:-.045em;font-weight:800;text-wrap:balance;opacity:0;animation:fadeUp 1.1s var(--ease) .1s forwards}
.rgo-lead{margin-top:24px;max-width:50ch;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--i800);opacity:0;animation:fadeUp 1s var(--ease) .4s forwards}
.rm .rgo-title,.rm .rgo-lead{opacity:1}

.rgo-list{position:relative;padding:clamp(56px,8vh,90px) 0 clamp(90px,12vh,140px)}
.rgo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.rgo-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.6vw,34px);border-radius:26px;background:#fff;color:var(--i950);box-shadow:0 28px 60px -34px rgba(32,59,110,.45),inset 0 0 0 1px rgba(68,107,180,.12);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rgo-card:hover{transform:translateY(-4px);box-shadow:0 40px 70px -34px rgba(32,59,110,.55),inset 0 0 0 1px rgba(68,107,180,.28)}
.rgo-card .gi{--s:56px}
.rgo-card small{margin-top:22px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--p700)}
.rgo-card h2{margin-top:10px;font-size:clamp(20px,1.9vw,25px);font-weight:800;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.rgo-card p{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--i800);text-wrap:pretty}
.rgo-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;font-size:13px;color:var(--i700)}
.rgo-meta i{width:4px;height:4px;border-radius:50%;background:var(--i300)}
.rgo-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14.5px;font-weight:800;color:var(--p700)}
.rgo-more svg{transition:transform .35s var(--ease)}
.rgo-card:hover .rgo-more svg{transform:translateX(5px)}

@media (max-width:860px){.rgo-grid{grid-template-columns:minmax(0,1fr)}}