/* Midnight Ocean theme: loaded after main.css */
/* palette is repeated here so the theme still renders if var.css is served stale */
:root { color-scheme: dark; --bg-page: #111518; --bg-sidebar: #181E22; --bg-surface: #20282D; --bg-row-alt: #242E33; --bg-table-head: #2C3A3E; --bg-hover: #303F43; --text-primary: #D8DFE1; --text-heading: #E1E7E8; --text-secondary: #A6B3B7; --text-muted: #9DAAAF; --accent: #75B9B2; --accent-hover: #94CEC6; --accent-soft: #273538; --accent-text: #101C1D; --border: #354248; }
html { background: var(--bg-page); color: var(--text-primary); }
body { background: var(--bg-page); color: var(--text-primary); font-size: 16px; font-weight: 400; line-height: 1.65; }
main, .content { background: var(--bg-page); }
header { background: var(--bg-page); border-bottom: 1px solid var(--border); }

/* typography */
.content > * { font-size: 16px; line-height: 1.65; }
.content h1 { font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--text-heading); margin-bottom: 14px; }
.content h2:not([class]) { font-size: 28px; font-weight: 650; line-height: 1.3; color: var(--text-heading); margin-top: 32px; margin-bottom: 14px; }
.content h3:not([class]) { font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--text-heading); margin-top: 24px; margin-bottom: 12px; }
.content h4:not([class]) { color: var(--text-heading); }
.content p:not([class]), .content ul:not([class]), .content ol:not([class]) { color: var(--text-primary); }
.content p:not([class]) { margin-bottom: 16px; }
.content p:not([class]):last-child { margin-bottom: 0; }
.content .text-secondary { color: var(--text-secondary); }
.content a:not([class]) { color: var(--accent); }
.content a:not([class]):hover { color: var(--accent-hover); }
a { transition: color 180ms ease; }

/* cards */
.pros-cons__col, .games-list__item, .bonus-banner { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; }
.pros-cons__col:hover, .games-list__item:hover { background: var(--bg-row-alt); }

/* tables */
.content .table-wrapper { margin: 0 0 16px; padding: 0; overflow-x: auto; overflow-y: hidden; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; }
.content table.rs-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background: var(--bg-surface); }
.content .rs-table thead th { padding: 14px 16px; text-align: left; font-size: 15px; font-weight: 600; line-height: 1.4; color: #A9D9D2; background: var(--bg-table-head); border: 0; border-bottom: 1px solid var(--border); }
.content .rs-table tbody td { padding: 13px 16px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text-primary); text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--border); transition: background-color 180ms ease; }
.content .rs-table tbody tr:nth-child(odd) td { background: var(--bg-surface); }
.content .rs-table tbody tr:nth-child(even) td { background: var(--bg-row-alt); }
.content .rs-table tbody tr:hover td { background: var(--bg-hover); }
.content .rs-table tbody tr:last-child td { border-bottom: 0; }
.content .rs-table tbody td:first-child { font-weight: 600; color: var(--text-primary); }
.content .table-wrapper::-webkit-scrollbar { height: 8px; }
.content .table-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* buttons */
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }

/* sidebar */
.main-sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); }
.main-sidebar__list { width: 100%; row-gap: 4px; }
.main-sidebar__list li { width: 100%; }
.main-sidebar .icon { background: var(--text-muted); transition: background-color 180ms ease; }
.main-sidebar__list .active .icon { background: #91CBC3; }

/* forms */
input, select, textarea { padding: 12px 14px; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* FAQ */
.faq-block__title { height: auto; margin: 0 0 14px; padding: 0; border-radius: 0; font-size: 28px; font-weight: 650; line-height: 1.3; color: var(--text-heading); background: transparent; box-shadow: none; }
.faq-block__list { row-gap: 10px; }
.faq-block__item, .faq-block__item:last-child { padding: 16px 52px 16px 20px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; transition: background-color 180ms ease; }
.faq-block__item.active { background: var(--bg-row-alt); }
.faq-block__item:before { right: 20px; top: 22px; background: var(--text-muted); }
.faq-block__item-title { padding-right: 0; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--text-heading); }
.faq-block__item-content { font-size: 16px; line-height: 1.65; color: var(--text-primary); }

/* slot cards: the source images have two aspect ratios (5:7 and 2:3), so one ratio is forced to keep the grid aligned */
.slots-list__logo { aspect-ratio: 2 / 3; height: auto; object-fit: cover; object-position: center; }

/* slot category chips */

/* footer and bars */
.mobile-bottom { background: var(--bg-page); border-top: 1px solid var(--border); }
.large-banner { background: var(--bg-surface); }
@media (min-width: 768px) { .large-banner__preview { max-height: 350px; object-fit: cover; object-position: center top; } }

@media (max-width: 767px) {
  body { font-size: 15px; }
  .content > * { font-size: 15px; line-height: 1.65; }
  .container { padding-left: 16px; padding-right: 16px; }
  .content h1 { font-size: 28px; }
  .content h2:not([class]) { font-size: 24px; margin-bottom: 14px; }
  .content h3:not([class]) { font-size: 20px; margin-bottom: 12px; }
  .faq-block__title { font-size: 24px; }
  .faq-block__item-title { font-size: 17px; line-height: 1.4; }
  .content section { padding-bottom: 24px; }
  .content .rs-table thead th, .content .rs-table tbody td { font-size: 14px; padding: 11px 12px; }
  .content table.rs-table:has(th:nth-child(3)) { min-width: 520px; }
  .large-banner__preview { aspect-ratio: 1040 / 600; height: auto; object-fit: cover; object-position: 100% 50%; }
  .button, .button--gold, .button--gold-outline { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
}
/* ===== buttons: four variants, one radius ===== */
:root {
  --btn-radius: 10px;
  --focus-ring: rgba(79, 209, 197, 0.45);
  --btn-primary-bg: #4FD1C5; --btn-primary-bg-hover: #67E0D5; --btn-primary-bg-active: #3FC2B6; --btn-primary-text: #071418;
  --btn-secondary-text: #8FE7DF; --btn-secondary-border: #3AAFA3;
  --btn-secondary-bg-hover: #16353A; --btn-secondary-text-hover: #B4F5EF; --btn-secondary-border-hover: #57C9BE;
  --btn-secondary-bg-active: #1C4146; --btn-secondary-text-active: #D2FFFB; --btn-secondary-border-active: #67E0D5;
  --btn-nav-bg: #21343A; --btn-nav-text: #DCE8EA; --btn-nav-border: #2E4C53;
  --btn-nav-bg-hover: #29424A; --btn-nav-text-hover: #F2F7F8; --btn-nav-border-hover: #3E6570;
  --btn-nav-bg-active: #335761; --btn-nav-text-active: #FFFFFF; --btn-nav-border-active: #4FD1C5;
  --btn-slot-bg: #322842; --btn-slot-text: #D8C8FF; --btn-slot-border: #5B4E78;
  --btn-slot-bg-hover: #3D3150; --btn-slot-text-hover: #EEE5FF; --btn-slot-border-hover: #7A67A3;
  --btn-slot-bg-active: #7955B5;
  --btn-gold-bg: #E5B65A; --btn-gold-bg-hover: #EDC572; --btn-gold-bg-active: #D4A64A; --btn-gold-text: #1A1406;
  --btn-nav-current-bg: #335761; --btn-nav-current-text: #FFFFFF; --btn-nav-current-border: #4FD1C5;
  /* legacy names used by template components */
  --main-btn-bg: var(--btn-primary-bg); --main-btn-bg-hover: var(--btn-primary-bg-hover); --main-btn-border: var(--btn-primary-bg); --main-btn-text-color: var(--btn-primary-text);
  --slot-btn-bg: var(--btn-gold-bg); --slot-btn-bg-hover: var(--btn-gold-bg-hover); --slot-btn-text-color: var(--btn-gold-text);
}

/* A. primary CTA: Registrieren, Bonus sichern, Jetzt spielen, content CTAs */
.button, .button--gold, .large-banner .large-banner__cta {
  height: auto; min-height: 46px; padding: 12px 24px; color: var(--btn-primary-text); background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-bg); border-radius: var(--btn-radius); font-weight: 700; box-shadow: none; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.button:hover, .button--gold:hover, .large-banner .large-banner__cta:hover { color: var(--btn-primary-text); background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
.button:active, .button--gold:active, .large-banner .large-banner__cta:active { color: var(--btn-primary-text); background: var(--btn-primary-bg-active); border-color: var(--btn-primary-bg-active); }
.slots-list__cta { width: 100%; min-height: 40px; padding: 10px 18px; color: var(--btn-gold-text); background: var(--btn-gold-bg); border: 1px solid var(--btn-gold-bg); border-radius: var(--btn-radius); font-weight: 700; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.slots-list a:hover .slots-list__cta { color: var(--btn-gold-text); background: var(--btn-gold-bg-hover); border-color: var(--btn-gold-bg-hover); }
.slots-list a:active .slots-list__cta { color: var(--btn-gold-text); background: var(--btn-gold-bg-active); border-color: var(--btn-gold-bg-active); }

/* B. secondary: Anmelden */
.button--gold-outline, .button.button--gold-outline { color: var(--btn-secondary-text); background: transparent; border: 1px solid var(--btn-secondary-border); font-weight: 600; }
.button--gold-outline:hover, .button.button--gold-outline:hover { color: var(--btn-secondary-text-hover); background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border-hover); }
.button--gold-outline:active, .button.button--gold-outline:active { color: var(--btn-secondary-text-active); background: var(--btn-secondary-bg-active); border-color: var(--btn-secondary-border-active); }

/* sizes per place */
.main-header .button { min-height: 40px; padding: 10px 22px; }
.main-sidebar .button { min-height: 44px; padding: 10px 18px; }
.mobile-bottom .button { min-height: 46px; padding: 12px 24px; }
.download-app-btn { border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--bg-surface); }

/* C. sidebar navigation */
.main-sidebar__list .main-sidebar__list-item { min-height: 44px; padding: 10px 18px; color: #B9C5C8; background: transparent; border: 1px solid transparent; border-radius: var(--btn-radius); font-weight: 600; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.main-sidebar__list a.main-sidebar__list-item:hover, .expand-item__list a:hover { color: var(--btn-nav-text-hover); background: var(--btn-nav-bg-hover); border-color: var(--btn-nav-border-hover); text-decoration: none; }
.main-sidebar__list a.main-sidebar__list-item:active { color: var(--btn-nav-text-active); background: var(--btn-nav-bg-active); border-color: var(--btn-nav-border-active); }
.main-sidebar__list .active .main-sidebar__list-item { color: var(--btn-nav-current-text) !important; background: var(--btn-nav-current-bg); border-color: var(--btn-nav-current-border); pointer-events: none; }

/* D. slot category buttons */
.slots-nav__item--gold { min-height: 38px; padding: 8px 16px; color: var(--btn-slot-text); background: var(--btn-slot-bg); border: 1px solid var(--btn-slot-border); border-radius: var(--btn-radius); font-weight: 700; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.slots-nav__item--gold .icon { background: currentColor; }
.slots-nav__item--gold:hover { color: var(--btn-slot-text-hover); background: var(--btn-slot-bg-hover); border-color: var(--btn-slot-border-hover); }
.slots-nav__item--gold:active, .slots-nav__item--gold.is-active { color: #FFFFFF; background: var(--btn-slot-bg-active); border-color: var(--btn-slot-bg-active); }

/* focus and disabled */
.button:focus-visible, .button--gold-outline:focus-visible, .slots-nav__item--gold:focus-visible, .slots-list a:focus-visible .slots-list__cta, .main-sidebar__list a:focus-visible, .download-app-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.button:disabled, .button[disabled], .button[aria-disabled="true"], .button.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

@media (max-width: 767px) { .slots-list__cta { padding: 10px 6px; font-size: 13px; line-height: 1.2; text-align: center; } }
@media (max-width: 420px) { .main-header .button { padding: 10px 14px; } }
@media (max-width: 359px) { .main-header .button { padding: 10px 10px; } .slots-list__cta { font-size: 11.5px; padding: 10px 3px; } }