/* ============================================================
   Spielregeln (regeln) – seitenspezifisches CSS
   ============================================================ */

.page-hero{background:radial-gradient(900px 380px at 80% -20%,rgba(62,204,92,.10),transparent 62%),linear-gradient(180deg,#fafcff,#fff);
  padding:64px 24px 40px;text-align:center}
.page-hero .tag{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-deep)}
.page-hero h1{font-size:clamp(32px,5vw,48px);font-weight:800;color:var(--navy);margin:12px 0 12px}
.page-hero p{font-size:18px;color:var(--muted);max-width:560px;margin:0 auto}

main{padding:48px 0 80px}
.rule{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.rule:last-child{border-bottom:none}
.rule-num{flex-shrink:0;width:46px;height:46px;border-radius:13px;background:var(--navy);color:#fff;
  font-family:'Sora';font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.rule h3{font-size:20px;color:var(--navy);margin-bottom:6px}
.rule p{font-size:15.5px;color:var(--muted)}
.rule p b{color:var(--text)}

.panel{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:30px;margin:40px 0}
.panel h2{font-size:24px;color:var(--navy);margin-bottom:6px}
.panel .sub{font-size:15px;color:var(--muted);margin-bottom:20px}
table{width:100%;border-collapse:collapse;font-size:15px}
table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table tr:last-child td{border-bottom:none}
table td:first-child{color:var(--text);font-weight:600;width:56%}
.out{font-weight:700;white-space:nowrap}
.out.inno{color:var(--accent-deep)}
.out.imp{color:var(--red)}
.out.none{color:var(--muted)}

.tips{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.tip{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px}
.tip h4{font-size:15px;color:var(--navy);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.tip p{font-size:14px;color:var(--muted)}
.tip h4 .lucide{width:18px;height:18px;color:var(--accent-deep)}
@media(max-width:720px){.tips{grid-template-columns:1fr}}

.cta-band{text-align:center;background:var(--navy);border-radius:24px;padding:48px 30px;margin-top:48px;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(560px 200px at 50% -30%,rgba(62,204,92,.22),transparent 60%)}
.cta-band h2{color:#fff;font-size:28px;position:relative}
.cta-band p{color:#aeb9d4;margin:12px auto 24px;max-width:480px;position:relative}
.cta-band .btn{position:relative}