/* ============================================================
 * site-spinfellas.css
 * spinfellas.com.de, Spinfellas Casino Deutschland.
 * Theme 2, centered top navigation, content in a 1120 px column.
 * Espresso ground, mocha panels, cream buttons, copper accent,
 * taken from the supplied Spinfellas screens.
 * Rammetto One headings, Red Hat Text body.
 * ============================================================ */
:root {
  --sf-bg: #24150c; --sf-bg2: #1a0f08; --sf-surf: #3a2516; --sf-surf2: #4a3121; --sf-surf3: #5b3e2c; --sf-mocha: #7a5a48;
  --sf-line: #5a3d2a; --sf-line2: #7a5a48; --sf-cream: #f6e7c8; --sf-cream2: #fff3dc; --sf-ink: #2a170b;
  --sf-copper: #e0a46b; --sf-copper2: #efbf8f; --sf-text: #fbf4ea; --sf-muted: #d9c6b1; --sf-faint: #a88f78;
  --sf-col: 1120px;
}
html, body { background: var(--sf-bg); color: var(--sf-text); }
body { font-family: 'Red Hat Text', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.7; }
h1, h2, h3, h5 { font-family: 'Rammetto One', 'Arial Black', Arial, sans-serif; font-weight: 400; color: var(--sf-text); letter-spacing: 0; }
a { color: var(--sf-copper); }
a:hover { color: var(--sf-cream); }
.container { width: 100%; max-width: var(--sf-col); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

/* ---------- top bar ---------- */
.sf-topbar { background: var(--sf-bg2); border-bottom: 1px solid var(--sf-line); font-size: 13px; }
.sf-topbar .container { display: flex; justify-content: center; gap: 22px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.sf-topbar span, .sf-topbar a { color: var(--sf-muted); text-decoration: none; }
.sf-topbar span:first-child { color: var(--sf-ink); background: var(--sf-copper); border-radius: 4px; padding: 0 7px; font-weight: 700; }

/* ---------- header: logo, centered nav, actions ---------- */
.sf-header { background: rgba(36,21,12,0.96); border-bottom: 1px solid var(--sf-line); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; }
.sf-header__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; min-height: 76px; max-width: 1200px; }
.sf-logo { display: inline-flex; align-items: center; line-height: 0; }
.sf-logo img { height: 46px; width: auto; }
.sf-nav { display: flex; justify-content: center; gap: 4px; }
.nav-actions .btn { white-space: nowrap; }
.sf-nav a { color: var(--sf-muted); font-weight: 600; font-size: 15px; padding: 8px 14px; white-space: nowrap; text-decoration: none; border-radius: 999px; }
.sf-nav a:hover { color: var(--sf-text); background: rgba(122,90,72,0.35); }
.sf-nav a.active { color: var(--sf-ink); background: var(--sf-cream); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.btn { font-family: 'Red Hat Text', sans-serif; font-weight: 700; border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; font-size: 15px; letter-spacing: .02em; transition: background .15s ease, transform .15s ease; }
.btn--primary { background: var(--sf-cream); color: var(--sf-ink); border: 1px solid var(--sf-cream); text-transform: uppercase; }
.btn--primary:hover { background: var(--sf-cream2); color: var(--sf-ink); transform: translateY(-1px); }
.btn--outline, .btn--ghost { background: transparent; color: var(--sf-text); border: 1px solid var(--sf-line2); }
.btn--outline:hover, .btn--ghost:hover { border-color: var(--sf-copper); color: var(--sf-text); background: rgba(224,164,107,0.10); }
.nav-toggle span { background: var(--sf-text); }
.nav-mobile { background: var(--sf-bg2); border-bottom: 1px solid var(--sf-line); }
.nav-mobile a { color: var(--sf-text); }
.nav-mobile a.active { color: var(--sf-copper); }
@media (max-width: 1180px) {
  .sf-nav, .nav-actions { display: none; }
  .nav-toggle { display: flex; justify-self: end; }
  .sf-logo img { height: 38px; }
}
@media (min-width: 1181px) { .nav-toggle { display: none; } .nav-mobile { display: none !important; } }
@media (max-width: 560px) { .sf-topbar a { display: none; } .sf-topbar .container { gap: 14px; } }

/* ---------- hero: copy left, supplied screen right ---------- */
main .content-section.sfhero { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); text-align: left; border-bottom: 0;
  background:
    radial-gradient(50% 70% at 90% 10%, rgba(224,164,107,0.22), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(122,90,72,0.35), transparent 70%),
    linear-gradient(180deg, var(--sf-bg2), var(--sf-bg)); }
.sfhero .container { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: center; }
.sfhero--plain .container { grid-template-columns: 1fr; }
.sfhero--plain .sfhero__copy { max-width: 820px; margin: 0 auto; text-align: center; }
.sfhero--plain .sfcta { justify-content: center; }
.sfhero--plain .lead { margin-left: auto; margin-right: auto; }
.sfhero .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-copper); border: 1px solid var(--sf-copper); border-radius: 999px; padding: 4px 14px; margin: 0 0 18px; }
.sfhero h1 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.15; margin: 0 0 18px; text-wrap: balance; }
.sfhero .lead { color: var(--sf-muted); font-size: clamp(16px, 1.3vw, 18px); max-width: 62ch; margin: 0 0 26px; }
.sfcta { display: flex; gap: 12px; flex-wrap: wrap; }
.sfhero__notes { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; }
.sfhero__notes li { color: var(--sf-text); font-size: 15px; padding-left: 26px; position: relative; margin: 0; }
.sfhero__notes li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--sf-copper); box-shadow: 0 0 0 3px rgba(224,164,107,0.25); }
.sfhero__fig { margin: 0; justify-self: center; width: min(100%, 440px); }
.sfhero__fig img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .sfhero .container { grid-template-columns: 1fr; gap: 20px; } .sfhero__fig { width: min(72%, 300px); } }

/* ---------- ribbon ---------- */
main .content-section.sfribbon { padding: 0 0 8px; border: 0; background: transparent; }
.sfribbon ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--sf-surf); border: 1px solid var(--sf-line); border-radius: 16px; overflow: hidden; }
.sfribbon li { margin: 0; padding: 16px 12px; text-align: center; border-left: 1px solid var(--sf-line); }
.sfribbon li:first-child { border-left: 0; }
.sfribbon strong { display: block; font-family: 'Rammetto One', sans-serif; font-weight: 400; font-size: clamp(17px, 1.7vw, 22px); color: var(--sf-cream); line-height: 1.25; }
.sfribbon span { display: block; color: var(--sf-muted); font-size: 13px; margin-top: 2px; }
@media (max-width: 860px) { .sfribbon ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sfribbon li:nth-child(4) { border-left: 0; } .sfribbon li:nth-child(n+4) { border-top: 1px solid var(--sf-line); } }
@media (max-width: 480px) { .sfribbon ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sfribbon li { border-left: 0; border-top: 1px solid var(--sf-line); } .sfribbon li:nth-child(even) { border-left: 1px solid var(--sf-line); } .sfribbon li:nth-child(-n+2) { border-top: 0; } }

/* ---------- sections as centered panels ---------- */
main .content-section { padding: clamp(18px, 2.4vw, 28px) 0; border: 0; background: transparent; text-align: left; }
main .content-section:not(.sfhero):not(.sfribbon):not(.sfband) > .container { position: relative; }
main .content-section:not(.sfhero):not(.sfribbon):not(.sfband):not(.sf404) > .container::before { content: ""; position: absolute; inset: 0 20px; background: linear-gradient(180deg, rgba(58,37,22,0.92), rgba(46,29,17,0.92)); border: 1px solid var(--sf-line); border-radius: 18px; z-index: -1; }
main .content-section:not(.sfhero):not(.sfribbon):not(.sfband):not(.sf404) > .container { padding: clamp(26px, 3.4vw, 44px) clamp(40px, 4.4vw, 64px); isolation: isolate; }
main .content-section > .container::after { content: ""; display: block; clear: both; }
main .content-section h2 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.22; margin: 0 0 20px; text-align: left; text-transform: none; }
main .content-section h2::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 4px; background: var(--sf-copper); margin-top: 12px; }
main .content-section h3 { font-size: 18px; color: var(--sf-copper); margin: 24px 0 10px; }
main p, main li, main dd { color: #f1e6d8; }
main p { margin: 0 0 16px; }
main ul, main ol { margin: 0 0 18px; padding-left: 22px; }
main li { margin-bottom: 8px; }
main li::marker { color: var(--sf-copper); font-weight: 700; }
main a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* supplied artwork, floated beside text */
.sffig { margin: 0 0 18px; width: min(36%, 300px); }
.sffig img { display: block; width: 100%; height: auto; }
.sffig--right { float: right; margin-left: 30px; }
.sffig--left { float: left; margin-right: 30px; }
@media (max-width: 760px) {
  .sffig, .sffig--right, .sffig--left { float: none; width: min(80%, 300px); margin: 0 auto 20px; }
}

/* tables */
.sftbl { overflow-x: auto; margin: 8px 0 22px; border: 1px solid var(--sf-line2); border-radius: 12px; background: var(--sf-bg2); clear: both; }
.sftbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sftbl caption { caption-side: top; text-align: left; padding: 12px 16px; font-weight: 700; color: var(--sf-cream); background: var(--sf-surf3); border-bottom: 1px solid var(--sf-line2); }
.sftbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--sf-copper); background: var(--sf-surf2); padding: 10px 16px; white-space: nowrap; border: 1px solid var(--sf-line); }
.sftbl td { padding: 10px 16px; border: 1px solid var(--sf-line); color: #f1e6d8; }
.sftbl tr:nth-child(even) td { background: rgba(74,49,33,0.45); }
.sftbl td:first-child { font-weight: 700; color: var(--sf-text); }

/* fact list */
dl.sffacts { margin: 8px 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; clear: both; }
dl.sffacts > div { background: var(--sf-bg2); border: 1px solid var(--sf-line); border-left: 4px solid var(--sf-copper); border-radius: 10px; padding: 10px 14px; }
dl.sffacts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--sf-copper); font-weight: 700; }
dl.sffacts dd { margin: 2px 0 0; font-size: 15px; }
@media (max-width: 620px) { dl.sffacts { grid-template-columns: 1fr; } }

/* studio name tiles (names only, compact) */
.sftiles { list-style: none; padding: 0 !important; margin: 6px 0 20px !important; display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
.sftiles li { margin: 0; background: var(--sf-mocha); color: var(--sf-text); font-weight: 700; font-size: 14px; border-radius: 8px; padding: 7px 12px; line-height: 1.2; }

/* cta band */
main .content-section.sfband { text-align: center; padding: clamp(18px, 2.4vw, 28px) 0; }
.sfband .container { background: linear-gradient(115deg, #5b3e2c, #7a5a48 60%, #5b3e2c); border-radius: 18px; padding: clamp(28px, 4vw, 44px) 24px !important; max-width: calc(var(--sf-col) - 40px); }
.sfband__t { font-family: 'Rammetto One', sans-serif; font-size: clamp(20px, 2.2vw, 28px); color: var(--sf-cream) !important; margin: 0 0 8px; line-height: 1.25; }
.sfband__d { color: var(--sf-text) !important; max-width: 62ch; margin: 0 auto 20px !important; }

/* faq */
.sfqa { border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-bg2); margin: 0 0 10px; }
.sfqa summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--sf-text); list-style: none; position: relative; padding-right: 44px; }
.sfqa summary::-webkit-details-marker { display: none; }
.sfqa summary::after { content: "+"; position: absolute; right: 18px; top: 10px; font-size: 22px; color: var(--sf-copper); }
.sfqa[open] summary::after { content: "\2212"; }
.sfqa p { padding: 0 18px 14px; margin: 0; color: var(--sf-muted); }

/* 404 */
main .content-section.sf404 { padding: 80px 0; text-align: center; }
.sf404 h1 { font-size: clamp(28px, 3.4vw, 42px); }

/* footer */
.sf-footer { background: var(--sf-bg2); border-top: 1px solid var(--sf-line); padding: 48px 0 110px; margin-top: 28px; }
.sf-footer .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.sf-footer .footer-brand p { color: var(--sf-muted); font-size: 14px; margin: 14px 0; }
.sf-footer .sf-logo img { height: 42px; }
.sf-footer h5 { font-size: 14px; color: var(--sf-copper); margin: 0 0 12px; }
.sf-footer ul { list-style: none; padding: 0; margin: 0; }
.sf-footer li { margin-bottom: 8px; }
.sf-footer a { color: var(--sf-muted); text-decoration: none; font-size: 14px; }
.sf-footer a:hover { color: var(--sf-cream); }
.footer-badge { border: 1px solid var(--sf-line2); color: var(--sf-muted); border-radius: 6px; padding: 4px 10px; font-size: 12px; margin-right: 6px; display: inline-block; margin-bottom: 6px; }
.sf-footer .footer-bottom { border-top: 1px solid var(--sf-line); margin-top: 32px; padding-top: 18px; }
.footer-disclaimer, .footer-copy { color: var(--sf-faint); font-size: 13px; margin: 0 0 8px; }
@media (max-width: 820px) { .sf-footer .footer-grid { grid-template-columns: 1fr 1fr; } .sf-footer .footer-brand { grid-column: 1 / -1; } }

/* sticky cta */
.sticky-cta { background: rgba(26,15,8,0.97); border-top: 1px solid var(--sf-line2); }
.sticky-cta__text span:first-child { color: var(--sf-muted); }
.sticky-cta__bonus { color: var(--sf-cream); font-weight: 700; }

@media (max-width: 600px) {
  main .content-section:not(.sfhero):not(.sfribbon):not(.sfband):not(.sf404) > .container { padding: 24px 30px; }
  main .content-section:not(.sfhero):not(.sfribbon):not(.sfband):not(.sf404) > .container::before { inset: 0 10px; }
}
main .content-section p { max-width: none; }
main .content-section li, main .content-section ol, main .content-section ul { max-width: none; }
@media (max-width: 600px) { .sticky-cta__bonus { font-size: 13px; line-height: 1.3; text-transform: none; letter-spacing: 0; } .sticky-cta__text span:first-child { display: none; } }