/**
 * rdo-rollen-gold/roles.css – banrado.de
 * RDO Rollen und Gold. Früher als <style> in rdo-rollen-gold/index.php, ausgelagert 09.10.2026.
 */
/* ── RDO Rollen Gold – Scoped Styles ── */
.rdo-gold{--rg-card:#0e1118;--rg-card2:#141720;--rg-surface:#1a1e2a;--rg-border:rgba(255,255,255,0.07);--rg-border2:rgba(255,255,255,0.13);--rg-red:#c0392b;--rg-red-dim:rgba(192,57,43,0.20);--rg-red-lt:#e07060;--rg-green:#22c55e;--rg-green-dim:rgba(34,197,94,0.12);--rg-purple:#a78bfa;--rg-purple-dim:rgba(167,139,250,0.12);--rg-amber:#f59e0b;--rg-amber-dim:rgba(245,158,11,0.12);--rg-text:rgba(255,255,255,0.72);--rg-text-dim:rgba(255,255,255,0.28);--rg-text-hi:rgba(255,255,255,0.95);--rg-radius:12px;font-size:14px;line-height:1.6;padding-bottom:40px;}
body.light-theme .rdo-gold{--rg-card:#ffffff;--rg-card2:#f8fafc;--rg-surface:#e4eaf4;--rg-border:rgba(0,0,0,0.08);--rg-border2:rgba(0,0,0,0.15);--rg-text:rgba(0,0,0,0.72);--rg-text-dim:rgba(0,0,0,0.38);--rg-text-hi:rgba(0,0,0,0.93);}
.rdo-gold .rg-page{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:20px;}

/* Hero */
.rdo-gold .rg-hero{background:var(--rg-card);border:0.5px solid var(--rg-border);border-radius:var(--rg-radius);padding:28px 32px;position:relative;overflow:hidden;}
.rdo-gold .rg-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rg-red);}
.rdo-gold .rg-hero h1{font-size:22px;font-weight:700;color:var(--rg-text-hi);letter-spacing:-0.02em;margin-bottom:8px;}
.rdo-gold .rg-hero p{font-size:14px;color:var(--rg-text-dim);max-width:560px;line-height:1.6;}

/* Section label */
.rdo-gold .rg-sec-label{font-size:11px;font-weight:600;color:var(--rg-text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}

/* Rollen Grid */
.rdo-gold .rg-roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;}
.rdo-gold .rg-role-card{background:var(--rg-card);border:0.5px solid var(--rg-border);border-radius:var(--rg-radius);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;position:relative;user-select:none;}
.rdo-gold .rg-role-card:hover{border-color:var(--rg-border2);}
.rdo-gold .rg-role-card.active{border-color:var(--rg-red);background:var(--rg-red-dim);}
.rdo-gold .rg-role-check{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;border:0.5px solid var(--rg-border2);background:var(--rg-surface);display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;transition:.15s;}
.rdo-gold .rg-role-card.active .rg-role-check{background:var(--rg-red);border-color:var(--rg-red);color:#fff;}
.rdo-gold .rg-role-icon{font-size:22px;margin-bottom:8px;}
.rdo-gold .rg-role-name{font-size:13px;font-weight:600;color:var(--rg-text-hi);margin-bottom:3px;}
.rdo-gold .rg-role-cost{font-size:12px;color:var(--rg-text-dim);}
.rdo-gold .rg-role-card.active .rg-role-name{color:#fff;}
.rdo-gold .rg-role-card.active .rg-role-cost{color:rgba(255,255,255,0.6);}
.rdo-gold .rg-role-note{font-size:10px;color:var(--rg-text-dim);margin-top:4px;line-height:1.3;}

/* Inputs */
.rdo-gold .rg-card{background:var(--rg-card);border:0.5px solid var(--rg-border);border-radius:var(--rg-radius);padding:20px 24px;}
.rdo-gold .rg-input-group{display:flex;flex-direction:column;gap:14px;}
.rdo-gold .rg-input-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.rdo-gold .rg-input-row label{font-size:13px;color:var(--rg-text);flex:1;min-width:180px;}
.rdo-gold .rg-input-row label span{font-size:11px;color:var(--rg-text-dim);display:block;margin-top:2px;}
.rdo-gold .rg-input-controls{display:flex;align-items:center;gap:8px;}
.rdo-gold .rg-input-controls input[type=number]{width:80px;background:var(--rg-surface);border:0.5px solid var(--rg-border2);border-radius:8px;color:var(--rg-text-hi);font-size:14px;padding:7px 10px;text-align:right;-moz-appearance:textfield;}
.rdo-gold .rg-input-controls input::-webkit-inner-spin-button{-webkit-appearance:none;}
.rdo-gold .rg-input-controls input:focus{outline:none;border-color:var(--rg-red);}
.rdo-gold .rg-input-unit{font-size:12px;color:var(--rg-text-dim);min-width:60px;}
.rdo-gold .rg-select-control{background:var(--rg-surface);border:0.5px solid var(--rg-border2);border-radius:8px;color:var(--rg-text-hi);font-size:13px;padding:7px 10px;}
.rdo-gold .rg-select-control:focus{outline:none;border-color:var(--rg-red);}
.rdo-gold hr{border:none;border-top:0.5px solid var(--rg-border);}

/* Ergebnis */
.rdo-gold .rg-result-card{background:var(--rg-card);border:0.5px solid var(--rg-border);border-radius:var(--rg-radius);overflow:hidden;}
.rdo-gold .rg-result-head{background:var(--rg-card2);border-bottom:0.5px solid var(--rg-border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.rdo-gold .rg-result-head-title{font-size:12px;font-weight:600;color:var(--rg-text-dim);text-transform:uppercase;letter-spacing:0.08em;}
.rdo-gold .rg-result-total{font-size:20px;font-weight:700;color:var(--rg-text-hi);}
.rdo-gold .rg-result-total span{font-size:13px;font-weight:400;color:var(--rg-text-dim);margin-left:4px;}
.rdo-gold .rg-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;}
.rdo-gold .rg-result-metric{padding:20px 24px;border-right:0.5px solid var(--rg-border);border-bottom:0.5px solid var(--rg-border);}
.rdo-gold .rg-result-metric:last-child{border-right:none;}
.rdo-gold .rg-rm-label{font-size:11px;color:var(--rg-text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.06em;}
.rdo-gold .rg-rm-value{font-size:24px;font-weight:700;color:var(--rg-text-hi);letter-spacing:-0.02em;}
.rdo-gold .rg-rm-unit{font-size:13px;font-weight:400;color:var(--rg-text-dim);margin-left:3px;}
.rdo-gold .rg-rm-value.accent{color:var(--rg-red-lt);}
.rdo-gold .rg-rm-value.ok{color:var(--rg-green);}
.rdo-gold .rg-result-hint{padding:12px 24px;font-size:11px;color:var(--rg-text-dim);border-top:0.5px solid var(--rg-border);line-height:1.5;}

/* Rollen-Liste im Ergebnis */
.rdo-gold .rg-selected-roles{padding:12px 24px;border-bottom:0.5px solid var(--rg-border);display:flex;flex-wrap:wrap;gap:6px;}
.rdo-gold .rg-role-badge{font-size:11px;padding:3px 10px;border-radius:99px;font-weight:500;background:var(--rg-red-dim);color:var(--rg-red-lt);border:0.5px solid rgba(192,57,43,0.3);}
.rdo-gold .rg-no-selection{font-size:13px;color:var(--rg-text-dim);font-style:italic;padding:12px 24px;}

/* Streak info */
.rdo-gold .rg-streak-info{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;}
.rdo-gold .rg-streak-pill{background:var(--rg-surface);border:0.5px solid var(--rg-border);border-radius:8px;padding:8px 10px;text-align:center;}
.rdo-gold .rg-streak-pill .rg-day{font-size:11px;color:var(--rg-text-dim);}
.rdo-gold .rg-streak-pill .rg-mult{font-size:14px;font-weight:600;color:var(--rg-text-hi);}
.rdo-gold .rg-streak-pill .rg-gold{font-size:10px;color:var(--rg-text-dim);}

/* SEO Block */
.rdo-gold .rg-seo-block{background:var(--rg-card);border:0.5px solid var(--rg-border);border-radius:var(--rg-radius);padding:28px 32px;}
.rdo-gold .rg-seo-block h2{font-size:18px;font-weight:700;color:var(--rg-text-hi);margin-bottom:12px;}
.rdo-gold .rg-seo-block h3{font-size:11px;font-weight:600;color:var(--rg-text-hi);margin:18px 0 6px;text-transform:uppercase;letter-spacing:0.06em;}
.rdo-gold .rg-seo-block p{color:var(--rg-text);margin-bottom:8px;line-height:1.7;}
.rdo-gold .rg-seo-block a{color:var(--rg-red-lt);text-decoration:none;}
.rdo-gold .rg-seo-block a:hover{text-decoration:underline;}

/* Tool footer */
.rdo-gold .rg-tool-foot{font-size:11px;color:var(--rg-text-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.rdo-gold .rg-tool-foot a{color:var(--rg-text-dim);text-decoration:none;}

@media(max-width:600px){
  .rdo-gold .rg-hero{padding:20px 18px;}
  .rdo-gold .rg-hero h1{font-size:18px;}
  .rdo-gold .rg-card{padding:16px 18px;}
  .rdo-gold .rg-result-metric{border-right:none;}
  .rdo-gold .rg-streak-info{grid-template-columns:repeat(2,1fr);}
  .rdo-gold .rg-seo-block{padding:20px 18px;}
  .rdo-gold .rg-input-row{flex-direction:column;align-items:flex-start;gap:8px;}
}