/* ===================================
   CrownPlay Deutschland - Hauptstil
   Version: 1.0.0
   =================================== */

:root {
  --primär-gold: #d4a574;
  --gold-dunkel: #b08d5a;
  --gold-hell: #e6b885;
  --akzent-grün: #00d4aa;
  --grün-hell: #00e6bb;
  --hintergrund-dunkel: #0a0908;
  --panel-bg: #1f1c1a;
  --panel-hover: #2a2622;
  --text-haupt: #ffffff;
  --text-zweite: #b8b8b8;
  --text-gedämpft: #6b6866;
  --rahmen-farbe: rgba(165,130,100,.15);
  --schatten-klein: 0 2px 8px rgba(0,0,0,.4);
  --schatten-mittel: 0 4px 16px rgba(0,0,0,.5);
  --schatten-gross: 0 8px 32px rgba(0,0,0,.6);
  --schatten-gold: 0 8px 32px rgba(212,165,116,.25);
  --übergang-schnell: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --übergang-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --übergang-langsam: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--hintergrund-dunkel);
  color: var(--text-haupt);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Ladeindikator */
.ladeindikator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hintergrund-dunkel);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s;
}

.lade-spinner {
  width: 60px;
  height: 60px;
  border: 3px solid rgba(212,165,116,.2);
  border-top-color: var(--primär-gold);
  border-radius: 50%;
  animation: drehen 1s linear infinite;
}

@keyframes drehen {
  to { transform: rotate(360deg); }
}

/* Navigation */
.haupt-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(10,9,8,.96);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--rahmen-farbe);
  z-index: 1000;
  transition: all var(--übergang-normal);
}

.nav-inhalt {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.marken-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform var(--übergang-schnell);
}

.marken-logo:hover {
  transform: scale(1.05);
}

.menu-liste {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}

.menu-eintrag {
  color: var(--text-zweite);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  transition: color var(--übergang-schnell);
}

.menu-eintrag::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primär-gold);
  transition: width var(--übergang-normal);
}

.menu-eintrag:hover {
  color: var(--primär-gold);
}

.menu-eintrag:hover::after {
  width: 100%;
}

.desktop-aktionen,
.mobile-aktionen {
  display: flex;
  gap: 15px;
}

.mobile-aktionen {
  display: none;
}

.burger-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.burger-menu span {
  width: 24px;
  height: 2px;
  background: var(--text-haupt);
  transition: all var(--übergang-schnell);
}

/* Buttons */
.knopf {
  padding: 12px 25px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--übergang-schnell);
  position: relative;
  overflow: hidden;
}

.knopf-umriss {
  background: transparent;
  color: var(--text-haupt);
  border: 1px solid var(--rahmen-farbe);
}

.knopf-umriss:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--primär-gold);
  color: var(--primär-gold);
}

.knopf-voll {
  background: linear-gradient(135deg, var(--primär-gold), var(--gold-dunkel));
  color: #000;
  font-weight: 700;
  box-shadow: var(--schatten-gold);
}

.knopf-voll:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(212,165,116,.35);
}

.knopf-gross {
  padding: 16px 40px;
  font-size: 16px;
}

/* Willkommen Bereich */
.willkommen-bereich {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 100px 20px 60px;
}

.hintergrund-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.hintergrund-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10,9,8,.6) 60%, var(--hintergrund-dunkel) 100%);
}

.willkommen-inhalt {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.status-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(212,165,116,.1);
  border: 1px solid var(--primär-gold);
  border-radius: 100px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primär-gold);
  animation: einblenden 0.6s ease;
}

@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.haupt-titel {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 20px;
  animation: hochgleiten 0.8s ease;
}

.titel-zeile {
  display: block;
  color: var(--text-zweite);
  font-size: 0.8em;
  font-weight: 600;
}

.titel-highlight {
  background: linear-gradient(135deg, var(--text-haupt), var(--primär-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes hochgleiten {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.untertitel {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-zweite);
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  animation: hochgleiten 1s ease;
}

.aktion-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
  animation: hochgleiten 1.2s ease;
}

.knopf-text {
  display: block;
  font-size: 16px;
}

.knopf-zusatz {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  font-weight: 500;
}

.statistik-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  background: rgba(31,28,26,.4);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  animation: hochgleiten 1.4s ease;
}

.stat-box {
  text-align: center;
}

.stat-wert {
  font-size: 28px;
  font-weight: 800;
  color: var(--primär-gold);
  margin-bottom: 5px;
}

.stat-beschreibung {
  font-size: 13px;
  color: var(--text-gedämpft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sicherheits-Banner */
.sicherheit-banner {
  padding: 30px 20px;
  background: linear-gradient(90deg, rgba(31,28,26,.5) 0%, rgba(42,38,34,.5) 100%);
  border-top: 1px solid var(--rahmen-farbe);
  border-bottom: 1px solid var(--rahmen-farbe);
}

.sicherheit-elemente {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.sicherheit-punkt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}

/* Container */
.container-breit {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-schmal {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Bereich Styles */
.kategorien-bereich,
.spiele-showcase,
.bonus-bereich,
.zahlungs-bereich,
.live-bereich,
.sport-bereich,
.vip-bereich,
.mobile-bereich,
.info-bereich,
.bonus-rad-bereich {
  padding: 80px 0;
}

.bereich-kopf {
  text-align: center;
  margin-bottom: 50px;
}

.bereich-kopf.zentiert {
  text-align: center;
}

.bereich-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  background: rgba(0,212,170,.1);
  border: 1px solid var(--akzent-grün);
  border-radius: 100px;
  color: var(--akzent-grün);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.bereich-titel {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  margin-bottom: 15px;
  color: var(--text-haupt);
}

.bereich-text {
  font-size: 17px;
  color: var(--text-zweite);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Kategorie Karten */
.kategorie-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.kategorie-karte {
  background: var(--panel-bg);
  border: 1px solid var(--rahmen-farbe);
  border-radius: 12px;
  padding: 30px;
  transition: all var(--übergang-normal);
}

.kategorie-karte.highlight {
  background: linear-gradient(135deg, rgba(212,165,116,.08) 0%, var(--panel-bg) 100%);
  border-color: rgba(212,165,116,.3);
}

.kategorie-karte:hover {
  transform: translateY(-5px);
  box-shadow: var(--schatten-gross);
  border-color: var(--primär-gold);
}

.karte-icon {
  font-size: 40px;
  margin-bottom: 20px;
  display: block;
}

.karte-titel {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-haupt);
}

.karte-text {
  font-size: 14px;
  color: var(--text-zweite);
  line-height: 1.6;
  margin-bottom: 15px;
}

.karte-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0;
}

.stat-item {
  padding: 4px 10px;
  background: rgba(212,165,116,.1);
  border: 1px solid rgba(212,165,116,.3);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primär-gold);
}

.karte-link {
  color: var(--primär-gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all var(--übergang-schnell);
}

.karte-link:hover {
  color: var(--gold-hell);
}

/* Spiele Showcase */
.spiel-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.filter-knopf {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-zweite);
  border: 1px solid var(--rahmen-farbe);
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--übergang-schnell);
}

.filter-knopf.aktiv {
  background: var(--primär-gold);
  color: #000;
  border-color: var(--primär-gold);
}

.filter-knopf:hover:not(.aktiv) {
  border-color: var(--primär-gold);
  color: var(--primär-gold);
}

.spiele-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.spiel-vorschau {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-bg);
  transition: all var(--übergang-normal);
  cursor: pointer;
}

.spiel-vorschau:hover {
  transform: scale(1.05);
  box-shadow: var(--schatten-gross);
}

.spiel-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background: rgba(0,0,0,.8);
  color: var(--text-haupt);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.spiel-bild {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.spiel-info {
  padding: 15px;
  text-align: center;
}

.spiel-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.spiel-anbieter {
  font-size: 13px;
  color: var(--text-zweite);
  margin-bottom: 10px;
}

.spiel-button {
  display: inline-block;
  padding: 8px 20px;
  background: var(--akzent-grün);
  color: #000;
  border-radius: 5px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--übergang-schnell);
}

.spiel-button:hover {
  background: var(--grün-hell);
  transform: translateY(-2px);
}

.mehr-spiele {
  text-align: center;
  margin-top: 40px;
}

/* Bonus Bereich */
.haupt-bonus-box {
  background: linear-gradient(135deg, rgba(212,165,116,.08) 0%, rgba(0,212,170,.08) 100%);
  border: 2px solid var(--primär-gold);
  border-radius: 20px;
  padding: 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}

.bonus-highlight {
  display: inline-block;
  padding: 5px 15px;
  background: rgba(0,212,170,.2);
  border: 1px solid var(--akzent-grün);
  border-radius: 100px;
  color: var(--akzent-grün);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.bonus-summe {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 900;
  background: linear-gradient(135deg, var(--primär-gold), var(--akzent-grün));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 15px;
}

.bonus-details {
  font-size: 18px;
  color: var(--text-zweite);
  margin-bottom: 30px;
}

.bonus-aufschlusselung {
  max-width: 600px;
  margin: 30px auto;
  text-align: left;
}

.bonus-aufschlusselung h4 {
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
  color: var(--text-zweite);
}

.einzahlung-schritt {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  margin-bottom: 15px;
  background: rgba(0,0,0,.3);
  border-radius: 10px;
  border-left: 3px solid var(--primär-gold);
}

.einzahlung-schritt.special {
  background: rgba(212,165,116,.1);
  border-left-color: var(--akzent-grün);
}

.schritt-nummer {
  width: 40px;
  height: 40px;
  background: var(--primär-gold);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.schritt-info {
  flex: 1;
}

.schritt-titel {
  display: block;
  font-size: 14px;
  color: var(--primär-gold);
  font-weight: 600;
  margin-bottom: 5px;
}

.schritt-bonus {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-haupt);
}

.bonus-hinweis {
  font-size: 12px;
  color: var(--text-gedämpft);
  margin-top: 20px;
}

/* Weitere Aktionen */
.weitere-aktionen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.aktion-karte {
  background: var(--panel-bg);
  border: 1px solid var(--rahmen-farbe);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  transition: all var(--übergang-normal);
}

.aktion-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-mittel);
  border-color: var(--primär-gold);
}

.aktion-icon {
  font-size: 36px;
  margin-bottom: 15px;
}

.aktion-titel {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.aktion-text {
  font-size: 14px;
  color: var(--text-zweite);
  margin-bottom: 15px;
  line-height: 1.5;
}

.aktion-wert {
  font-size: 16px;
  font-weight: 800;
  color: var(--primär-gold);
  margin-bottom: 15px;
}

.aktion-link {
  color: var(--primär-gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* Zahlungs Bereich */
.zahlungs-features {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.feature-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 25px;
  background: rgba(31,28,26,.3);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.zahlungs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

.zahlungs-gruppe {
  background: var(--panel-bg);
  border-radius: 12px;
  padding: 25px;
}

.gruppe-titel {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--primär-gold);
}

.zahlungs-liste {
  list-style: none;
}

.zahlungs-liste li {
  padding: 8px 0;
  color: var(--text-zweite);
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.zahlungs-liste li:last-child {
  border-bottom: none;
}

.zahlungs-cta {
  text-align: center;
  padding: 40px;
  background: rgba(31,28,26,.3);
  border-radius: 15px;
}

.zahlungs-cta p {
  margin-bottom: 20px;
  color: var(--text-zweite);
}

/* Live Bereich */
.live-statistik {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.live-stat {
  text-align: center;
}

.stat-zahl {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--primär-gold);
  margin-bottom: 5px;
}

.live-kategorien {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.live-box {
  background: var(--panel-bg);
  border-radius: 12px;
  padding: 25px;
  transition: all var(--übergang-normal);
}

.live-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--schatten-gross);
}

.live-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-haupt);
}

.live-box p {
  font-size: 14px;
  color: var(--text-zweite);
  margin-bottom: 15px;
  line-height: 1.5;
}

.box-link {
  color: var(--primär-gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* Sport Bereich */
.sport-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.sport-box {
  text-align: center;
  padding: 25px 15px;
  background: var(--panel-bg);
  border-radius: 12px;
  transition: all var(--übergang-normal);
}

.sport-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-mittel);
}

.sport-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

.sport-box h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.sport-box p {
  font-size: 13px;
  color: var(--text-zweite);
}

.sport-banner {
  background: linear-gradient(135deg, rgba(0,212,170,.1) 0%, rgba(212,165,116,.1) 100%);
  border: 2px solid var(--akzent-grün);
  border-radius: 15px;
  padding: 40px;
  text-align: center;
}

.sport-banner h3 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--akzent-grün), var(--primär-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sport-banner p {
  margin-bottom: 25px;
  color: var(--text-zweite);
}

/* VIP Bereich */
.vip-stufen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

.vip-stufe {
  background: var(--panel-bg);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  transition: all var(--übergang-normal);
}

.vip-stufe::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 12px 12px 0 0;
}

.vip-stufe.bronze::before {
  background: linear-gradient(90deg, #cd7f32, #8b4513);
}

.vip-stufe.silber::before {
  background: linear-gradient(90deg, #c0c0c0, #808080);
}

.vip-stufe.gold::before {
  background: linear-gradient(90deg, var(--primär-gold), var(--gold-dunkel));
}

.vip-stufe.platin::before {
  background: linear-gradient(90deg, #e5e4e2, #fff);
}

.vip-stufe:hover {
  transform: translateY(-8px);
  box-shadow: var(--schatten-gross);
}

.stufe-header {
  margin-bottom: 20px;
}

.stufe-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
}

.stufe-header h3 {
  font-size: 20px;
  font-weight: 700;
}

.stufe-vorteile {
  list-style: none;
  text-align: left;
}

.stufe-vorteile li {
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-zweite);
  position: relative;
  padding-left: 20px;
}

.stufe-vorteile li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--akzent-grün);
  font-weight: 700;
}

/* Mobile Bereich */
.mobile-bereich {
  background: linear-gradient(180deg, rgba(31,28,26,.2) 0%, var(--hintergrund-dunkel) 100%);
}

.mobile-inhalt {
  max-width: 800px;
  margin: 0 auto;
}

.mobile-text {
  text-align: center;
}

.mobile-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  margin: 40px 0;
}

.mobile-punkt {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  text-align: left;
}

.punkt-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.punkt-text h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.punkt-text p {
  font-size: 13px;
  color: var(--text-zweite);
}

/* Info Bereich */
.info-artikel {
  max-width: 900px;
  margin: 0 auto;
}

.artikel-titel {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 30px;
  color: var(--text-haupt);
}

.artikel-untertitel {
  font-size: 22px;
  font-weight: 700;
  margin: 30px 0 15px;
  color: var(--primär-gold);
}

.artikel-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-zweite);
  margin-bottom: 20px;
}

.artikel-cta {
  background: linear-gradient(135deg, rgba(212,165,116,.1) 0%, rgba(0,212,170,.1) 100%);
  border: 2px solid var(--primär-gold);
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  margin-top: 40px;
}

.artikel-cta h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 15px;
}

.artikel-cta p {
  font-size: 16px;
  color: var(--text-zweite);
  margin-bottom: 25px;
}

/* Glücksrad Bereich */
.gluecksrad-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
  background: linear-gradient(135deg, rgba(212,165,116,.05) 0%, rgba(0,212,170,.05) 100%);
  border-radius: 20px;
  margin: 40px 0;
}

.rad-grafik {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rad-kreis {
  width: 250px;
  height: 250px;
  background: conic-gradient(
    var(--primär-gold) 0deg 45deg,
    var(--akzent-grün) 45deg 90deg,
    var(--gold-hell) 90deg 135deg,
    var(--grün-hell) 135deg 180deg,
    var(--primär-gold) 180deg 225deg,
    var(--akzent-grün) 225deg 270deg,
    var(--gold-hell) 270deg 315deg,
    var(--grün-hell) 315deg 360deg
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rad-drehen 20s linear infinite;
  box-shadow: var(--schatten-gross);
}

@keyframes rad-drehen {
  to { transform: rotate(360deg); }
}

.rad-text {
  background: var(--hintergrund-dunkel);
  color: var(--text-haupt);
  padding: 20px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 14px;
}

.rad-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

.rad-liste {
  list-style: none;
  margin-bottom: 25px;
}

.rad-liste li {
  padding: 8px 0;
  color: var(--text-zweite);
  font-size: 14px;
  position: relative;
  padding-left: 25px;
}

.rad-liste li::before {
  content: '🎯';
  position: absolute;
  left: 0;
}

.rad-timer {
  background: rgba(31,28,26,.5);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
}

.timer-label {
  display: block;
  font-size: 13px;
  color: var(--text-gedämpft);
  margin-bottom: 5px;
}

.timer-zeit {
  font-size: 24px;
  font-weight: 800;
  color: var(--primär-gold);
}

.zusatz-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 40px;
}

.feature-mini {
  text-align: center;
  padding: 25px;
  background: var(--panel-bg);
  border-radius: 12px;
  transition: all var(--übergang-normal);
}

.feature-mini:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-mittel);
}

.mini-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 10px;
}

.feature-mini h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-mini p {
  font-size: 13px;
  color: var(--text-zweite);
}

/* Footer */
.fusszeile {
  background: var(--panel-bg);
  border-top: 1px solid var(--rahmen-farbe);
  padding: 60px 0 30px;
  margin-top: 80px;
}

.fuss-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.fuss-spalte h4 {
  color: var(--primär-gold);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.fuss-links {
  list-style: none;
}

.fuss-links li {
  margin-bottom: 10px;
}

.fuss-links a {
  color: var(--text-zweite);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--übergang-schnell);
}

.fuss-links a:hover {
  color: var(--primär-gold);
}

.zahlungs-logos,
.lizenz-bereich {
  margin: 30px 0;
  padding: 25px;
  background: rgba(31,28,26,.3);
  border-radius: 12px;
}

.zahlungs-logos h4,
.lizenz-bereich h4 {
  color: var(--primär-gold);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.logo-reihe,
.lizenz-badges {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.zahlung-logo,
.lizenz-badge {
  padding: 8px 15px;
  background: var(--panel-bg);
  border: 1px solid var(--rahmen-farbe);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-zweite);
}

.fuss-unten {
  border-top: 1px solid var(--rahmen-farbe);
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.copyright {
  color: var(--text-gedämpft);
  font-size: 13px;
  line-height: 1.6;
}

.sozial-links {
  display: flex;
  gap: 15px;
}

.sozial-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rahmen-farbe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-zweite);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: all var(--übergang-schnell);
}

.sozial-link:hover {
  border-color: var(--primär-gold);
  color: var(--primär-gold);
  transform: translateY(-3px);
}

.verantwortung-hinweis {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--rahmen-farbe);
  text-align: center;
}

.verantwortung-hinweis p {
  font-size: 12px;
  color: var(--text-gedämpft);
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Cookie Hinweis */
.cookie-hinweis {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 450px;
  background: var(--panel-bg);
  border: 1px solid var(--rahmen-farbe);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--schatten-gross);
  z-index: 2000;
  display: none;
}

.cookie-text {
  font-size: 13px;
  color: var(--text-zweite);
  margin-bottom: 15px;
  line-height: 1.5;
}

.cookie-text a {
  color: var(--primär-gold);
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
}

.cookie-knopf {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--übergang-schnell);
}

.cookie-knopf.annehmen {
  background: var(--primär-gold);
  color: #000;
}

.cookie-knopf.ablehnen {
  background: transparent;
  color: var(--text-zweite);
  border: 1px solid var(--rahmen-farbe);
}

/* Responsive Design */
@media (max-width: 768px) {
  .menu-liste {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background: var(--hintergrund-dunkel);
    flex-direction: column;
    padding: 30px;
    transition: left var(--übergang-normal);
  }

  .menu-liste.aktiv {
    left: 0;
  }

  .burger-menu {
    display: flex;
  }

  .desktop-aktionen {
    display: none;
  }

  .mobile-aktionen {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: auto;
    padding-top: 30px;
    border-top: 1px solid var(--rahmen-farbe);
  }

  .haupt-titel {
    font-size: 32px;
  }

  .statistik-raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .aktion-buttons {
    flex-direction: column;
  }

  .aktion-buttons .knopf {
    width: 100%;
  }

  .sicherheit-elemente {
    gap: 20px;
  }

  .kategorie-karten {
    grid-template-columns: 1fr;
  }

  .spiele-raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .haupt-bonus-box {
    padding: 30px 20px;
  }

  .bonus-summe {
    font-size: 28px;
  }

  .weitere-aktionen {
    grid-template-columns: 1fr;
  }

  .gluecksrad-box {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .rad-kreis {
    width: 200px;
    height: 200px;
  }

  .zusatz-features {
    grid-template-columns: 1fr;
  }

  .fuss-unten {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .stat-wert {
    font-size: 24px;
  }
  
  .bereich-titel {
    font-size: 24px;
  }
  
  .sport-highlights {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .vip-stufen {
    grid-template-columns: 1fr;
  }
  
  .mobile-features {
    grid-template-columns: 1fr;
  }
}

/* Utility Classes */
.versteckt {
  display: none !important;
}

.sichtbar {
  display: block !important;
}

@media print {
  .haupt-navigation,
  .cookie-hinweis,
  .ladeindikator {
    display: none;
  }
}