/* ============================================================
 * site-zeppelin-de.css
 * zeppelincasino.de.com, Zeppelin Casino Deutschland.
 * Theme 2, centered top navigation, content in a 1140 px column.
 * Night blue ground, electric blue buttons, coral and pink highlights
 * from the bonus cards in the supplied Zeppelin screens.
 * Unbounded headings, Onest body.
 * ============================================================ */
:root {
  --zc-bg: #090d22; --zc-bg2: #060918; --zc-surf: #10173a; --zc-surf2: #162050; --zc-surf3: #1c2860;
  --zc-line: #233070; --zc-line2: #33449a; --zc-blue: #2f5bff; --zc-blue2: #4a72ff; --zc-sky: #8fb0ff;
  --zc-coral: #ff6f78; --zc-pink: #e0479e; --zc-text: #eef1ff; --zc-muted: #b4bde3; --zc-faint: #8a95c4;
  --zc-col: 1140px;
}
html, body { background: var(--zc-bg); color: var(--zc-text); }
body { font-family: 'Onest', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.7;
  background: radial-gradient(900px 520px at 100% 0, rgba(47,91,255,0.16), transparent 70%), radial-gradient(700px 480px at 0 60%, rgba(224,71,158,0.07), transparent 70%), var(--zc-bg); }
h1, h2, h3, h5 { font-family: 'Unbounded', 'Arial Black', Arial, sans-serif; font-weight: 700; color: var(--zc-text); letter-spacing: -0.01em; }
a { color: var(--zc-sky); }
a:hover { color: var(--zc-coral); }
.container { width: 100%; max-width: var(--zc-col); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

/* ---------- header ---------- */
.zc-header { background: rgba(6,9,24,0.94); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--zc-line); }
.zc-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--zc-blue), var(--zc-pink) 55%, var(--zc-coral)); opacity: .85; }
.zc-header__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; min-height: 74px; max-width: 1220px; }
.zc-logo { display: inline-flex; align-items: center; line-height: 0; }
.zc-logo img { height: 44px; width: auto; }
.zc-nav { display: flex; justify-content: center; gap: 6px; }
.zc-nav a { color: var(--zc-muted); font-weight: 600; font-size: 15px; padding: 10px 14px; white-space: nowrap; text-decoration: none; position: relative; }
.zc-nav a:hover { color: var(--zc-text); }
.zc-nav a.active { color: var(--zc-text); }
.zc-nav a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--zc-coral); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-actions .btn { white-space: nowrap; }
.btn { font-family: 'Onest', sans-serif; font-weight: 700; border-radius: 12px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; font-size: 15px; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.btn--primary { background: var(--zc-blue); color: #fff; border: 1px solid var(--zc-blue); box-shadow: 0 8px 22px rgba(47,91,255,0.35); }
.btn--primary:hover { background: var(--zc-blue2); color: #fff; transform: translateY(-1px); }
.btn--outline, .btn--ghost { background: transparent; color: var(--zc-text); border: 1px solid var(--zc-line2); }
.btn--outline:hover, .btn--ghost:hover { border-color: var(--zc-coral); color: var(--zc-text); background: rgba(255,111,120,0.08); }
.nav-toggle span { background: var(--zc-text); }
.nav-mobile { background: var(--zc-bg2); border-bottom: 1px solid var(--zc-line); }
.nav-mobile a { color: var(--zc-text); }
.nav-mobile a.active { color: var(--zc-coral); }
@media (max-width: 1180px) {
  .zc-nav, .nav-actions { display: none; }
  .nav-toggle { display: flex; justify-self: end; }
  .zc-logo img { height: 38px; }
}
@media (min-width: 1181px) { .nav-toggle { display: none; } .nav-mobile { display: none !important; } }

/* ---------- hero: supplied screen left, copy right ---------- */
main .content-section.zchero { padding: clamp(36px, 5.5vw, 72px) 0 clamp(24px, 3.4vw, 40px); text-align: left; border-bottom: 0; background: transparent; }
.zchero .container { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 44px; align-items: center; }
.zchero--plain .container { grid-template-columns: 1fr; }
.zchero--plain .zchero__copy { max-width: 860px; }
.zchero--plain .container { background: linear-gradient(135deg, rgba(47,91,255,0.20), rgba(224,71,158,0.12) 60%, rgba(255,111,120,0.10)); border: 1px solid var(--zc-line); border-radius: 22px; padding: clamp(28px, 4vw, 52px) clamp(24px, 4.4vw, 60px); max-width: calc(var(--zc-col) - 40px); }
.zckicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zc-coral); margin: 0 0 16px; }
.zckicker::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--zc-coral); }
.zchero h1 { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.18; margin: 0 0 18px; text-wrap: balance; }
.zchero .lead { color: var(--zc-muted); font-size: clamp(16px, 1.25vw, 18px); max-width: 64ch; margin: 0 0 22px; }
.zchero__chip { display: inline-grid; grid-template-columns: auto; gap: 2px; background: linear-gradient(120deg, var(--zc-pink), var(--zc-coral)); color: #1b0712; border-radius: 16px; padding: 12px 20px; margin: 0 0 24px; }
.zchero__chip span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2a0b1c; }
.zchero__chip strong { font-family: 'Unbounded', sans-serif; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; color: #14040d; }
.zchero__chip em { font-style: normal; font-size: 13px; color: #2a0b1c; }
.zccta { display: flex; gap: 12px; flex-wrap: wrap; }
.zchero__fig { margin: 0; justify-self: center; width: min(100%, 420px); }
.zchero__fig img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .zchero .container { grid-template-columns: 1fr; gap: 18px; } .zchero__fig { width: min(70%, 290px); order: 2; } .zchero__copy { order: 1; } }

/* ---------- number strip ---------- */
main .content-section.zcstrip { padding: 0 0 10px; border: 0; background: transparent; }
.zcstrip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.zcstrip li { margin: 0; padding: 14px 12px; background: var(--zc-surf); border: 1px solid var(--zc-line); border-radius: 14px; border-top: 3px solid var(--zc-blue); }
.zcstrip li:nth-child(even) { border-top-color: var(--zc-coral); }
.zcstrip strong { display: block; font-family: 'Unbounded', sans-serif; font-size: clamp(16px, 1.5vw, 20px); color: var(--zc-text); line-height: 1.25; }
.zcstrip span { display: block; color: var(--zc-muted); font-size: 13px; margin-top: 3px; }
@media (max-width: 860px) { .zcstrip ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .zcstrip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- sections ---------- */
main .content-section { padding: clamp(16px, 2.2vw, 26px) 0; border: 0; background: transparent; text-align: left; }
main .content-section.zcsec > .container { background: var(--zc-surf); border: 1px solid var(--zc-line); border-radius: 20px; padding: clamp(26px, 3.4vw, 44px) clamp(24px, 4.2vw, 56px); max-width: calc(var(--zc-col) - 40px); }
main .content-section.zcsec:nth-of-type(even) > .container { background: linear-gradient(180deg, #121a42, #0f1636); }
main .content-section > .container::after { content: ""; display: block; clear: both; }
main .content-section h2 { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.25; margin: 0 0 20px; padding-left: 16px; border-left: 4px solid var(--zc-coral); text-transform: none; }
main .content-section h3 { font-size: 17px; color: var(--zc-sky); margin: 24px 0 10px; }
main p, main li, main dd { color: #dfe4fb; }
main p { margin: 0 0 16px; }
main .content-section p, main .content-section li, main .content-section ol, main .content-section ul { max-width: none; }

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

/* lists */
.zclist { list-style: none; padding: 0 !important; margin: 0 0 18px; overflow: hidden; }
.zclist li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.zclist li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 9px; height: 9px; border-radius: 3px; background: var(--zc-coral); transform: rotate(45deg); }
.zcsteps { list-style: none; counter-reset: zc; padding: 0 !important; margin: 0 0 20px; display: grid; gap: 8px; }
.zcsteps li { counter-increment: zc; position: relative; padding: 10px 14px 10px 54px; margin: 0; background: var(--zc-bg2); border: 1px solid var(--zc-line); border-radius: 12px; min-height: 24px; }
.zcsteps li::before { content: counter(zc); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--zc-blue); color: #fff; font-family: 'Unbounded', sans-serif; font-size: 14px; display: grid; place-items: center; }

/* tables */
.zctbl { margin: 8px 0 22px; border: 1px solid var(--zc-line2); border-radius: 14px; background: var(--zc-bg2); clear: both; overflow: hidden; }
.zctbl__cap { margin: 0 !important; padding: 12px 16px; font-weight: 700; color: var(--zc-text) !important; background: linear-gradient(90deg, rgba(47,91,255,0.35), rgba(224,71,158,0.18)); border-bottom: 1px solid var(--zc-line2); }
.zctbl__scroll { overflow-x: auto; }
.zctbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zctbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--zc-sky); background: var(--zc-surf2); padding: 10px 16px; white-space: nowrap; border-bottom: 1px solid var(--zc-line); }
.zctbl td { padding: 10px 16px; border-bottom: 1px solid var(--zc-line); color: #dfe4fb; }
.zctbl tr:last-child td { border-bottom: 0; }
.zctbl tr:nth-child(even) td { background: rgba(22,32,80,0.45); }
.zctbl td:first-child { font-weight: 700; color: var(--zc-text); }
.zctbl__note { margin: 0 !important; padding: 10px 16px; font-size: 14px; color: var(--zc-muted) !important; border-top: 1px solid var(--zc-line); }

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

/* page links */
.zclinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; clear: both; }
.zclinks a { display: block; text-decoration: none; background: var(--zc-bg2); border: 1px solid var(--zc-line2); border-radius: 14px; padding: 16px 18px; transition: border-color .15s ease, transform .15s ease; }
.zclinks a:hover { border-color: var(--zc-coral); transform: translateY(-2px); }
.zclinks strong { display: block; font-family: 'Unbounded', sans-serif; font-size: 15px; color: var(--zc-text); margin-bottom: 4px; }
.zclinks span { display: block; color: var(--zc-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 820px) { .zclinks { grid-template-columns: 1fr; } }

/* cta band */
main .content-section.zcband { padding: clamp(16px, 2.2vw, 26px) 0; }
.zcband .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(110deg, var(--zc-blue) 0%, #5a3bd8 50%, var(--zc-pink) 100%); border-radius: 20px; padding: clamp(24px, 3.4vw, 38px) clamp(24px, 4vw, 48px) !important; max-width: calc(var(--zc-col) - 40px); }
.zcband__t { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(19px, 2vw, 25px); color: #fff !important; margin: 0 0 6px; line-height: 1.25; }
.zcband__d { color: #f1f3ff !important; max-width: 62ch; margin: 0 !important; }
.zcband .btn--primary { background: #fff; color: #1a2a8a; border-color: #fff; box-shadow: none; flex-shrink: 0; }
.zcband .btn--primary:hover { background: #ffe9eb; color: #1a2a8a; }
@media (max-width: 700px) { .zcband .container { flex-direction: column; align-items: flex-start; } }

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

/* 404 */
main .content-section.zc404 { padding: 80px 0; text-align: center; }
.zc404 h1 { font-size: clamp(26px, 3.2vw, 40px); }

/* footer */
.zc-footer { background: var(--zc-bg2); border-top: 1px solid var(--zc-line); padding: 36px 0 110px; margin-top: 28px; }
.zc-footer__pay { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--zc-line); }
.zc-footer__pay span { font-size: 13px; font-weight: 600; color: var(--zc-muted); background: var(--zc-surf); border: 1px solid var(--zc-line); border-radius: 999px; padding: 5px 13px; }
.zc-footer .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.zc-footer .footer-brand p { color: var(--zc-muted); font-size: 14px; margin: 14px 0; }
.zc-footer .zc-logo img { height: 40px; }
.zc-footer h5 { font-size: 13px; color: var(--zc-coral); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .06em; }
.zc-footer ul { list-style: none; padding: 0; margin: 0; }
.zc-footer li { margin-bottom: 8px; }
.zc-footer a { color: var(--zc-muted); text-decoration: none; font-size: 14px; }
.zc-footer a:hover { color: var(--zc-text); }
.footer-badge { border: 1px solid var(--zc-line2); color: var(--zc-muted); border-radius: 6px; padding: 4px 10px; font-size: 12px; margin-right: 6px; display: inline-block; margin-bottom: 6px; }
.zc-footer .footer-bottom { border-top: 1px solid var(--zc-line); margin-top: 32px; padding-top: 18px; }
.footer-disclaimer, .footer-copy { color: var(--zc-faint); font-size: 13px; margin: 0 0 8px; }
@media (max-width: 820px) { .zc-footer .footer-grid { grid-template-columns: 1fr 1fr; } .zc-footer .footer-brand { grid-column: 1 / -1; } }

/* sticky cta */
.sticky-cta { background: rgba(6,9,24,0.97); border-top: 1px solid var(--zc-line2); }
.sticky-cta__text span:first-child { color: var(--zc-muted); }
.sticky-cta__bonus { color: var(--zc-coral); font-weight: 700; }
@media (max-width: 600px) {
  main .content-section.zcsec > .container { padding: 22px 18px; border-radius: 16px; }
  .container { padding-left: 14px; padding-right: 14px; }
  .sticky-cta__bonus { font-size: 13px; line-height: 1.3; text-transform: none; letter-spacing: 0; }
  .sticky-cta__text span:first-child { display: none; }
}
