/* CrownPlay DE 1 — Klassisches deutsches Casino theme
   Prefix: cpd1-
   Vibe: forest green + champagne gold + warm beige (traditional casino) */

:root {
  --cpd1-bg:        #0d1614;
  --cpd1-bg-2:      #131f1c;
  --cpd1-card:      #1a2925;
  --cpd1-line:      rgba(212,175,90,.15);
  --cpd1-forest:    #1f3a32;
  --cpd1-gold:      #d4af5a;
  --cpd1-gold-lt:   #e8c97e;
  --cpd1-beige:     #f5e9d4;
  --cpd1-burgundy:  #8b1f3a;
  --cpd1-text:      #ede4d2;
  --cpd1-mute:      #b3a78f;
  --cpd1-radius:    8px;
  --cpd1-display:   'Cormorant Garamond', 'Times New Roman', serif;
  --cpd1-body:      'Source Sans 3', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--cpd1-body);
  background: var(--cpd1-bg);
  color: var(--cpd1-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(180deg, var(--cpd1-bg) 0%, var(--cpd1-bg-2) 100%),
    radial-gradient(circle at 50% 0%, rgba(212,175,90,.06), transparent 60%);
  background-attachment: fixed;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--cpd1-gold); }

.cpd1-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.cpd1-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,22,20,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cpd1-line);
  padding: 1rem 0;
}
.cpd1-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cpd1-logo { display: flex; align-items: center; }
.cpd1-menu { display: flex; gap: 1.75rem; list-style: none; font-weight: 500; font-size: .92rem; }
.cpd1-menu a { color: var(--cpd1-mute); }
.cpd1-menu a:hover { color: var(--cpd1-gold-lt); }
.cpd1-burger { display: none; background: none; border: 0; color: var(--cpd1-gold); font-size: 1.6rem; cursor: pointer; }

/* Buttons */
.cpd1-btn {
  display: inline-block;
  padding: .9rem 1.85rem;
  border-radius: var(--cpd1-radius);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  border: 0;
}
.cpd1-btn--gold {
  background: linear-gradient(180deg, var(--cpd1-gold) 0%, var(--cpd1-gold-lt) 50%, var(--cpd1-gold) 100%);
  color: var(--cpd1-bg);
  box-shadow: 0 4px 14px rgba(212,175,90,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.cpd1-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(212,175,90,.5); color: var(--cpd1-bg); }
.cpd1-btn--ghost {
  background: transparent;
  color: var(--cpd1-beige);
  border: 1px solid var(--cpd1-gold);
}
.cpd1-btn--ghost:hover { background: var(--cpd1-gold); color: var(--cpd1-bg); }
.cpd1-btn--lg { padding: 1.1rem 2.4rem; font-size: 1rem; }

/* Hero */
.cpd1-hero {
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.cpd1-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(31,58,50,.4), transparent 60%),
    radial-gradient(ellipse at 75% 50%, rgba(212,175,90,.12), transparent 55%);
}
.cpd1-hero__inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.cpd1-hero__seal {
  display: inline-block;
  font-family: var(--cpd1-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--cpd1-gold);
  letter-spacing: 3px;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--cpd1-gold);
  padding-bottom: .35rem;
}
.cpd1-hero__title {
  font-family: var(--cpd1-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.cpd1-hero__title em { color: var(--cpd1-gold); font-style: italic; }
.cpd1-hero__sub {
  font-size: 1.1rem;
  color: var(--cpd1-mute);
  margin-bottom: 2rem;
  max-width: 560px;
}
.cpd1-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.cpd1-hero__seals { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--cpd1-line); }
.cpd1-hero__seals > div { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--cpd1-mute); }
.cpd1-hero__seals strong { color: var(--cpd1-beige); font-weight: 600; }

.cpd1-hero__panel {
  background: var(--cpd1-card);
  border: 1px solid var(--cpd1-gold);
  border-radius: var(--cpd1-radius);
  padding: 2rem;
  text-align: center;
  position: relative;
  box-shadow: 0 24px 50px rgba(0,0,0,.4);
}
.cpd1-hero__panel-tag {
  font-family: var(--cpd1-display);
  font-style: italic;
  color: var(--cpd1-gold);
  letter-spacing: 2px;
  font-size: .85rem;
  margin-bottom: .5rem;
}
.cpd1-hero__panel-amount {
  font-family: var(--cpd1-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  color: var(--cpd1-beige);
  line-height: 1;
}
.cpd1-hero__panel-extra { color: var(--cpd1-gold-lt); font-weight: 600; font-size: 1rem; margin: .35rem 0 1.5rem; }
.cpd1-hero__panel-fine { font-size: .76rem; color: var(--cpd1-mute); margin-top: 1rem; }

/* Sections */
.cpd1-section { padding: 5rem 0; }
.cpd1-section--alt { background: var(--cpd1-bg-2); }
.cpd1-section__h2 {
  font-family: var(--cpd1-display);
  font-size: clamp(2rem, 3.5vw, 2.7rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: .75rem;
}
.cpd1-section__sub {
  text-align: center;
  color: var(--cpd1-mute);
  margin-bottom: 3rem;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}

/* Pillars */
.cpd1-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cpd1-pillar {
  background: var(--cpd1-card);
  border: 1px solid var(--cpd1-line);
  border-radius: var(--cpd1-radius);
  padding: 2rem;
  position: relative;
  transition: border-color .25s, transform .25s;
}
.cpd1-pillar:hover { border-color: var(--cpd1-gold); transform: translateY(-3px); }
.cpd1-pillar__icon { font-size: 2rem; margin-bottom: 1rem; }
.cpd1-pillar h3 { font-family: var(--cpd1-display); font-size: 1.35rem; margin-bottom: .6rem; color: var(--cpd1-gold-lt); }
.cpd1-pillar p { color: var(--cpd1-mute); font-size: .92rem; }

/* Stats */
.cpd1-stats {
  background: linear-gradient(135deg, var(--cpd1-card), rgba(31,58,50,.3));
  border: 1px solid var(--cpd1-line);
  border-radius: var(--cpd1-radius);
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.cpd1-stat { text-align: center; }
.cpd1-stat__num { font-family: var(--cpd1-display); font-size: 2.4rem; font-weight: 700; color: var(--cpd1-gold); line-height: 1; }
.cpd1-stat__label { font-size: .8rem; color: var(--cpd1-mute); text-transform: uppercase; letter-spacing: 2px; margin-top: .35rem; }

/* CTA block */
.cpd1-cta-block {
  margin: 3rem auto;
  max-width: 920px;
  padding: 2.75rem 2rem;
  background: linear-gradient(135deg, var(--cpd1-card), rgba(212,175,90,.08));
  border: 1px solid var(--cpd1-gold);
  border-radius: var(--cpd1-radius);
  text-align: center;
}
.cpd1-cta-block h2 { font-family: var(--cpd1-display); font-size: 1.85rem; margin-bottom: .75rem; }
.cpd1-cta-block h2 em { color: var(--cpd1-gold); font-style: italic; }
.cpd1-cta-block p { color: var(--cpd1-mute); margin-bottom: 1.75rem; max-width: 600px; margin-left: auto; margin-right: auto; }

/* Footer */
.cpd1-footer {
  background: #08110f;
  border-top: 1px solid var(--cpd1-gold);
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}
.cpd1-footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2.5rem; margin-bottom: 2.5rem; }
.cpd1-footer__col h4 { font-family: var(--cpd1-display); color: var(--cpd1-gold); margin-bottom: 1rem; font-size: 1.05rem; }
.cpd1-footer__col ul { list-style: none; }
.cpd1-footer__col li { padding: .3rem 0; }
.cpd1-footer__col a { color: var(--cpd1-mute); font-size: .9rem; }
.cpd1-footer__col a:hover { color: var(--cpd1-gold-lt); }
.cpd1-footer__bottom { border-top: 1px solid var(--cpd1-line); padding-top: 1.5rem; text-align: center; color: var(--cpd1-mute); font-size: .82rem; }
.cpd1-footer__rg { background: rgba(139,31,58,.15); border-left: 3px solid var(--cpd1-burgundy); padding: 1rem; margin-bottom: 1.5rem; font-size: .85rem; color: var(--cpd1-mute); }

/* Inner page */
.cpd1-page-hero {
  padding: 4.5rem 0 3rem;
  text-align: center;
  background: linear-gradient(180deg, var(--cpd1-bg-2), var(--cpd1-bg));
  border-bottom: 1px solid var(--cpd1-gold);
}
.cpd1-page-hero h1 { font-family: var(--cpd1-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; margin-bottom: .75rem; }
.cpd1-page-hero h1 em { color: var(--cpd1-gold); font-style: italic; }
.cpd1-page-hero p { color: var(--cpd1-mute); max-width: 720px; margin: 0 auto; }
.cpd1-content { max-width: 820px; margin: 0 auto; padding: 3rem 1.5rem; }
.cpd1-content h2 { font-family: var(--cpd1-display); font-size: 1.7rem; margin: 2.25rem 0 1rem; color: var(--cpd1-gold); }
.cpd1-content h3 { font-family: var(--cpd1-display); font-size: 1.3rem; margin: 1.5rem 0 .75rem; color: var(--cpd1-gold-lt); }
.cpd1-content p { margin-bottom: 1.1rem; color: #d8c9a8; }
.cpd1-content ul, .cpd1-content ol { margin: 1rem 0 1.25rem 1.5rem; }
.cpd1-content li { margin-bottom: .5rem; color: #d8c9a8; }
.cpd1-content a { color: var(--cpd1-gold-lt); border-bottom: 1px dashed; }
.cpd1-content table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  background: var(--cpd1-card); border-radius: var(--cpd1-radius); overflow: hidden;
}
.cpd1-content th, .cpd1-content td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--cpd1-line); }
.cpd1-content th { background: rgba(212,175,90,.12); color: var(--cpd1-gold); font-family: var(--cpd1-display); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: 1px; }

@media (max-width: 992px) {
  .cpd1-hero__inner { grid-template-columns: 1fr; }
  .cpd1-pillars { grid-template-columns: 1fr; }
  .cpd1-stats { grid-template-columns: repeat(2, 1fr); }
  .cpd1-footer__grid { grid-template-columns: 1fr 1fr; }
  .cpd1-menu { display: none; }
  .cpd1-burger { display: block; }
}
@media (max-width: 600px) {
  .cpd1-stats { grid-template-columns: 1fr; }
  .cpd1-footer__grid { grid-template-columns: 1fr; }
}