/* 4EVER1.TV – Ratgeber/Magazin (Gold/Schwarz, passend zur Startseite) */
:root{
  --bg:#040404; --bg-soft:#0c0a07; --panel:#100d09; --panel-2:#15110b;
  --line:rgba(212,160,40,.18); --line-strong:rgba(212,160,40,.4);
  --gold-1:#FCEFB4; --gold-2:#E8C66B; --gold-3:#D4A017;
  --gold-grad:linear-gradient(90deg,#FCEFB4,#E8C66B,#D4A017,#E8C66B,#FCEFB4);
  --txt:#efe7d6; --txt-dim:#a99f8c; --txt-faint:#6b6354;
  --radius:18px; --maxw:760px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--gold-2)}

.rg-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;background:rgba(4,4,4,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.rg-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)}
.rg-brand img{height:34px;width:auto;filter:drop-shadow(0 2px 8px rgba(212,160,40,.35))}
.rg-brand span{font-family:'Cinzel',serif;font-weight:800;letter-spacing:1px;font-size:15px}
.rg-navlinks{display:flex;gap:18px;font-size:.9rem}
.rg-navlinks a{text-decoration:none;color:var(--txt-dim)}
.rg-navlinks a:hover{color:var(--gold-2)}

.rg-main{max-width:var(--maxw);margin:0 auto;padding:30px 20px 10px}
.rg-kicker{font-family:'Cinzel',serif;letter-spacing:2px;text-transform:uppercase;font-size:.72rem;color:var(--gold-3);margin-bottom:14px}
.rg-main h1{font-family:'Cinzel',serif;font-weight:800;font-size:2rem;line-height:1.2;margin-bottom:16px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rg-lead{font-size:1.12rem;color:var(--txt);margin-bottom:26px}
.rg-article h2{font-family:'Cinzel',serif;font-weight:700;font-size:1.32rem;color:var(--gold-1);margin:30px 0 12px}
.rg-article h3{font-size:1.05rem;color:var(--gold-2);margin:22px 0 8px}
.rg-article p{margin:0 0 16px;color:var(--txt)}
.rg-article ul,.rg-article ol{margin:0 0 18px;padding-left:22px;color:var(--txt)}
.rg-article li{margin:0 0 8px}
.rg-article strong{color:var(--gold-1)}
.rg-meta{color:var(--txt-faint);font-size:.85rem;margin-bottom:26px}

/* Anzeigen-Slot (Google AdSense) */
.rg-ad{margin:28px 0;min-height:90px;text-align:center}
.rg-ad small{display:block;color:var(--txt-faint);font-size:.68rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}

/* Artikel-Karten (Hub) */
.rg-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0}
.rg-card{display:block;text-decoration:none;color:var(--txt);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;transition:border-color .15s,transform .1s}
.rg-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.rg-card h2{font-family:'Cinzel',serif;font-size:1.15rem;color:var(--gold-1);margin:0 0 6px}
.rg-card p{margin:0;color:var(--txt-dim);font-size:.95rem}

/* CTA zurück zur Bewerbung */
.rg-cta{margin:34px 0 8px;padding:24px;background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-strong);border-radius:var(--radius);text-align:center}
.rg-cta h2{font-family:'Cinzel',serif;font-size:1.25rem;color:var(--gold-1);margin:0 0 8px}
.rg-cta p{color:var(--txt-dim);margin:0 0 16px}
.rg-btn{display:inline-block;text-decoration:none;font-weight:700;color:#1a1206;
  background:linear-gradient(180deg,#FDF3C4,#E8C66B 50%,#D4A017);padding:12px 22px;border-radius:999px}

/* Weiterlesen */
.rg-more{margin:30px 0 0;border-top:1px solid var(--line);padding-top:18px}
.rg-more h3{font-family:'Cinzel',serif;color:var(--gold-2);font-size:1rem;margin:0 0 10px}
.rg-more a{display:block;text-decoration:none;color:var(--txt-dim);padding:7px 0}
.rg-more a:hover{color:var(--gold-2)}

.rg-foot{max-width:var(--maxw);margin:30px auto 0;padding:22px 20px;border-top:1px solid var(--line);
  text-align:center;color:var(--txt-faint);font-size:.85rem;font-family:'Manrope',system-ui,sans-serif}
.rg-foot a{color:var(--txt-faint);text-decoration:none}
.rg-foot a:hover{color:var(--gold-2)}
.rg-copy{margin-top:10px;color:var(--txt-faint)}

@media(max-width:560px){
  .rg-navlinks{display:none}
  .rg-main h1{font-size:1.6rem}
}