/*
Theme Name: DeutschlandCasinoDesign
Version: 4.1.8
Beschreibung: Einzigartiges, responsives Design für Quickwin Casino Deutschland
*/

/* Grundlegende Einstellungen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

.deutsche-glucksspiel-hauptseite {
    background-color: #0a0a12;
    color: #ffffff;
    line-height: 1.6;
}

.inhalts-behalter {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

a:hover {
    color: #ffd700;
}

img {
    max-width: 100%;
    height: auto;
}

/* Überschriften und Text */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 3.2rem;
    background: linear-gradient(90deg, #ffffff, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 900;
    margin-bottom: 1.8rem;
}

h2 {
    font-size: 2.2rem;
    color: #ffd700;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}

h2:after {
    content: '';
    display: block;
    width: 90px;
    height: 5px;
    background: linear-gradient(90deg, #ff3131, #ffd700);
    margin: 18px auto 0;
    border-radius: 3px;
}

h3 {
    font-size: 1.6rem;
    color: #ffd700;
    margin-bottom: 1.2rem;
}

h4 {
    font-size: 1.3rem;
    color: #ffd700;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.2rem;
    color: #cccccc;
    font-size: 16px;
    line-height: 1.7;
}

ul, ol {
    margin-left: 1.8rem;
    margin-bottom: 1.8rem;
    color: #cccccc;
}

li {
    margin-bottom: 0.6rem;
}

.fett, strong {
    color: #ffffff;
    font-weight: 700;
}

/* Header-Bereich */
.oberste-navigationsbereich {
    background: linear-gradient(180deg, #01030a, #1a1f2e 75%, #232732 95%);
    padding: 18px 35px;
    display: flex;
    background-image: url('../../uploads/2025/05/deutschland-karbon-hintergrund.svg');
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #ff3131;
    position: relative;
    z-index: 12;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35);
}

.markenzeichen-logo {
    display: flex;
    align-items: center;
}

.markenzeichen-logo img {
    max-height: 65px;
    transition: transform 0.4s ease;
}

.markenzeichen-logo img:hover {
    transform: scale(1.08);
}

.navigations-wrapper {
    display: flex;
    align-items: center;
    gap: 25px;
}

.suchfeld-bereich {
    position: relative;
    margin-right: 25px;
}

.suchfeld-bereich i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
    transition: color 0.4s ease;
}

.suchfeld-bereich i:hover {
    color: #ffd700;
}

.benutzer-aktionsknopfe {
    display: flex;
    gap: 12px;
}

.einloggen-taste {
    background-color: transparent;
    border: 1px solid #555;
    color: #fff;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s ease;
}

.einloggen-taste:hover {
    background-color: #333;
    border-color: #777;
    transform: translateY(-3px);
}

.neu-registrieren-taste {
    background: linear-gradient(90deg, #ffd700, #ff9d00);
    border: none;
    color: #000;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 5px 12px rgba(255, 215, 0, 0.35);
}

.neu-registrieren-taste:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(255, 215, 0, 0.45);
}

/* Hauptnavigation */
.primares-navigationsmenu {
    background-color: #1a1a22;
    display: flex;
    justify-content: center;
    padding: 8px 0;
    border-bottom: 1px solid #444;
    position: sticky;
    top: 0;
    z-index: 11;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}

.menu-element {
    padding: 12px 28px;
    margin: 0 8px;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.menu-element a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 0.6px;
position: relative;
z-index: 1;
}
.menu-element.aktiver-zustand {
background-color: #ff3131;
}
.menu-element:not(.aktiver-zustand):hover {
background-color: #2a2a32;
}
.menu-basis.aktiver-zustand {
background-color: #ff3131;
color: white;
}
.menu-basis:not(.aktiver-zustand):hover {
background-color: #2a2a32;
}
/* Banner-Bereich */
.held-banner-abschnitt {
position: relative;
min-height: 650px;
overflow: hidden;
background: linear-gradient(135deg, #1a0a0a 0%, #2a0a1a 100%);
padding: 50px 0;
}
.banner-hintergrund-grafik {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background: url('../../uploads/2025/05/quickwin-deutschland-formel-1.webp') no-repeat center center;
opacity: 0.35;
z-index: 1;
animation: deutschland-pulsieren-animation 12s infinite alternate;
}
@keyframes deutschland-pulsieren-animation {
0% {
transform: scale(1);
opacity: 0.35;
}
100% {
transform: scale(1.06);
opacity: 0.45;
}
}
.banner-hauptinhalt {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 30px 35px;
display: flex;
flex-direction: column;
gap: 35px;
}
.banner-werbeaktion {
background-color: rgba(255, 49, 49, 0.85);
border-radius: 6px;
padding: 12px 32px;
width: fit-content;
font-weight: bold;
margin-bottom: 25px;
box-shadow: 0 6px 18px rgba(255, 49, 49, 0.35);
transform: skewX(-12deg);
}
.banner-beschreibungstext {
max-width: 850px;
font-size: 17px;
color: #cccccc;
margin-bottom: 35px;
background: rgba(0, 0, 0, 0.25);
padding: 25px;
border-radius: 12px;
border-left: 4px solid #ff3131;
}
.banner-beschreibungstext p {
margin-bottom: 18px;
}
.hauptaktion-schaltflache {
background: linear-gradient(90deg, #ffd700, #ff9d00);
border: none;
border-radius: 35px;
padding: 18px 45px;
font-size: 22px;
font-weight: bold;
color: #000;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: 0 6px 18px rgba(255, 215, 0, 0.35);
width: fit-content;
text-transform: uppercase;
display: inline-block;
position: relative;
overflow: hidden;
}
.hauptaktion-schaltflache:after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.25);
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.4s ease;
}
.hauptaktion-schaltflache:hover {
transform: translateY(-4px);
box-shadow: 0 9px 25px rgba(255, 215, 0, 0.45);
}
.hauptaktion-schaltflache:hover:after {
opacity: 1;
animation: deutschland-schimmer-effekt 1.8s infinite;
}
@keyframes deutschland-schimmer-effekt {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) rotate(45deg);
}
}
.motorsport-fahrzeug-grafik {
position: absolute;
bottom: -60px;
right: 10px;
width: 650px;
height: 320px;
background: url('../../uploads/2025/05/deutschland-rennwagen.webp') no-repeat center center;
background-size: contain;
z-index: 2;
transform: rotate(-6deg);
animation: deutschland-schweben-animation 5s ease-in-out infinite;
}
@keyframes deutschland-schweben-animation {
0%, 100% {
transform: rotate(-6deg) translateY(0px);
}
50% {
transform: rotate(-6deg) translateY(-18px);
}
}
/* Vorteile-Bereich */
.vorteile-ubersicht-abschnitt {
background-color: #0f0f18;
padding: 90px 0;
border-top: 5px solid #ff3131;
position: relative;
}
.vorteile-ubersicht-abschnitt:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
pointer-events: none;
}
.vorteile-raster-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 35px;
margin: 50px 0;
}
.vorteil-karte-element {
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 35px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
transition: transform 0.4s ease, box-shadow 0.4s ease;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.vorteil-karte-element:hover {
transform: translateY(-6px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
border-color: rgba(255, 49, 49, 0.25);
}
.vorteil-karte-element::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #ff3131, #ffd700);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.vorteil-karte-element:hover::after {
transform: scaleX(1);
}
.vorteil-symbol-icon {
font-size: 40px;
margin-bottom: 25px;
color: #ff3131;
transition: transform 0.4s ease;
}
.vorteil-karte-element:hover .vorteil-symbol-icon {
transform: scale(1.15);
}
.vorteil-karte-element h3 {
font-size: 22px;
margin-bottom: 18px;
color: #ffd700;
}
.vorteil-karte-element p {
color: #cccccc;
font-size: 17px;
line-height: 1.6;
}
/* Bonus Codes Section */
.bonus-codes-hauptabschnitt {
background-color: #0a0a12;
padding: 90px 0;
border-top: 1px solid #333;
}
.willkommensbonus-hervorhebung {
background: linear-gradient(145deg, #1d0a0a, #2a0a0a);
border-radius: 18px;
padding: 45px;
margin: 50px auto;
max-width: 850px;
text-align: center;
box-shadow: 0 12px 35px rgba(255, 49, 49, 0.25);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 49, 49, 0.35);
}
.willkommensbonus-hervorhebung:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0) 70%);
top: -50%;
left: -50%;
animation: deutschland-kreis-rotation 12s infinite linear;
}
@keyframes deutschland-kreis-rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.bonus-etikett {
background-color: #ff3131;
color: white;
font-weight: bold;
display: inline-block;
padding: 10px 25px;
border-radius: 30px;
margin-bottom: 25px;
font-size: 20px;
letter-spacing: 1.2px;
text-transform: uppercase;
transform: skewX(-12deg);
}
.bonus-summe {
font-size: 40px;
font-weight: 900;
color: #ffd700;
margin-bottom: 35px;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
letter-spacing: 1.2px;
}
.bonus-aktivieren-knopf {
background: linear-gradient(90deg, #ffd700, #ff9d00);
border: none;
border-radius: 35px;
padding: 18px 45px;
font-size: 22px;
font-weight: bold;
color: #000;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: 0 6px 18px rgba(255, 215, 0, 0.35);
display: inline-block;
text-decoration: none;
text-transform: uppercase;
position: relative;
z-index: 12;
}
.bonus-aktivieren-knopf:hover {
transform: translateY(-4px);
box-shadow: 0 9px 25px rgba(255, 215, 0, 0.45);
}
.willkommensbonus-details-bereich {
max-width: 1100px;
margin: 0 auto;
color: #ccc;
font-size: 17px;
line-height: 1.8;
}
.willkommensbonus-details-bereich h3 {
color: #ffd700;
font-size: 24px;
margin-bottom: 20px;
position: relative;
padding-left: 18px;
}
.willkommensbonus-details-bereich h3:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 5px;
background: #ff3131;
border-radius: 3px;
}
.willkommensbonus-details-bereich h4 {
color: #ffd700;
font-size: 20px;
margin-bottom: 15px;
margin-top: 30px;
}
/* Zahlungen Section */
.zahlungen-hauptbereich {
background-color: #0f0f18;
padding: 90px 0;
border-top: 1px solid #333;
position: relative;
}
.zahlungs-registerkarten {
max-width: 1100px;
margin: 50px auto;
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 18px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.registerkarten-navigation {
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.registerkarte-schaltflache {
flex: 1;
background: none;
border: none;
padding: 25px;
color: #ccc;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.registerkarte-schaltflache i {
font-size: 22px;
}
.registerkarte-schaltflache.aktiver-tab {
background: linear-gradient(to bottom, rgba(255, 49, 49, 0.12), transparent);
color: #ffd700;
box-shadow: inset 0 4px 0 #ff3131;
}
.registerkarte-schaltflache:hover:not(.aktiver-tab) {
background-color: rgba(255, 255, 255, 0.08);
}
.registerkarten-inhalte {
padding: 45px;
}
.registerkarten-panel {
display: none;
animation: deutschland-einblenden-animation 0.6s ease-in-out;
}
.registerkarten-panel.aktiver-inhalt {
display: block;
}
@keyframes deutschland-einblenden-animation {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.registerkarten-panel h3 {
color: #ffd700;
font-size: 24px;
margin-bottom: 20px;
}
.registerkarten-panel ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.registerkarten-panel li {
margin-bottom: 18px;
color: #ccc;
position: relative;
padding-left: 35px;
border-left: 2px solid rgba(255, 49, 49, 0.35);
padding-left: 25px;
margin-left: 12px;
}
.registerkarten-panel li:before {
content: "\f058";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: -15px;
top: 3px;
color: #ff3131;
background: #151520;
border-radius: 50%;
padding: 0 3px;
}
/* Sportwetten Section */
.sportwetten-hauptbereich {
background-color: #0a0a12;
padding: 90px 0;
border-top: 1px solid #333;
position: relative;
}
.sportwetten-hauptbereich:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
pointer-events: none;
}
.sportwetten-inhalte-container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 35px;
margin-top: 50px;
}
.sport-kategorien-ubersicht {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-top: 35px;
}
.sport-kategorie-option {
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 25px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
transition: transform 0.4s ease, border-color 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.sport-kategorie-option:hover {
transform: translateY(-6px);
border-color: rgba(255, 49, 49, 0.25);
}
.sport-kategorie-symbol {
font-size: 35px;
color: #ff3131;
margin-bottom: 18px;
transition: transform 0.4s ease;
}
.sport-kategorie-option:hover .sport-kategorie-symbol {
transform: scale(1.15);
}
.sport-kategorie-option h4 {
color: #ffd700;
font-size: 20px;
margin-bottom: 12px;
}
.sportwetten-bonus-angebot {
background: linear-gradient(145deg, #1a0a0a, #2a0a0a);
border-radius: 18px;
padding: 35px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 49, 49, 0.25);
}
.sportwetten-bonus-angebot:before {
content: "";
position: absolute;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(255, 49, 49, 0.25) 0%, rgba(255, 49, 49, 0) 70%);
top: -175px;
right: -175px;
}
.sportwetten-bonus-inhalte h3 {
color: #fff;
font-size: 26px;
margin-bottom: 18px;
}
.bonus-wert-anzeige {
font-size: 32px;
font-weight: 900;
color: #ffd700;
margin-bottom: 25px;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}
.sportwetten-schaltflache {
background: linear-gradient(90deg, #ff3131, #ff6a00);
color: white;
border: none;
border-radius: 35px;
padding: 15px 35px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: 0 6px 18px rgba(255, 49, 49, 0.35);
display: inline-block;
margin-top: 25px;
text-transform: uppercase;
text-decoration: none;
}
.sportwetten-schaltflache:hover {
transform: translateY(-4px);
box-shadow: 0 9px 25px rgba(255, 49, 49, 0.45);
color: white;
}
.quickwin-erfahrungen-bereich {
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 35px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
margin-top: 35px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.4s ease;
}
.quickwin-erfahrungen-bereich:hover {
transform: translateY(-6px);
border-color: rgba(255, 215, 0, 0.25);
}
/* Anmeldung & Verifizierung Section */
.anmeldung-verifizierung-bereich {
background-color: #0f0f18;
padding: 90px 0;
border-top: 1px solid #333;
}
.registrierungs-prozess {
margin: 50px 0;
}
.registrierungs-schritte {
display: flex;
flex-direction: column;
gap: 35px;
max-width: 850px;
margin: 35px auto;
}
.registrierungs-schritt {
display: flex;
gap: 25px;
align-items: flex-start;
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 30px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
transition: transform 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
}
.registrierungs-schritt:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 4px;
background: linear-gradient(90deg, #ff3131, #ffd700);
transition: width 0.4s ease;
}
.registrierungs-schritt:hover {
transform: translateY(-6px);
border-color: rgba(255, 49, 49, 0.25);
}
.registrierungs-schritt:hover:after {
width: 100%;
}
.schritt-nummerierung {
width: 55px;
height: 55px;
background: linear-gradient(135deg, #ff3131, #ff6a00);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 26px;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(255, 49, 49, 0.35);
color: #fff;
}
.schritt-beschreibung h4 {
color: #ffd700;
margin-bottom: 12px;
font-size: 22px;
}
.verifizierungs-informationen {
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 35px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
margin-top: 35px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.4s ease;
}
.verifizierungs-informationen:hover {
transform: translateY(-6px);
border-color: rgba(255, 215, 0, 0.25);
}
/* Mobile App Section */
.mobile-app-hauptbereich {
background-color: #0a0a12;
padding: 90px 0;
border-top: 1px solid #333;
position: relative;
}
.mobile-app-hauptbereich:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, #ff3131, transparent);
}
.app-funktionen-bereich {
margin: 35px 0;
}
.app-funktionen-liste {
list-style-type: none;
margin: 25px 0;
padding-left: 0;
}
.app-funktionen-liste li {
position: relative;
padding-left: 30px;
margin-bottom: 15px;
color: #ccc;
}
.app-funktionen-liste li:before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0;
color: #ff3131;
}
.plattform-ubersicht-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 35px;
margin: 50px 0;
}
.plattform-karte {
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 45px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
transition: transform 0.4s ease;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.plattform-karte:hover {
transform: translateY(-12px);
border-color: rgba(255, 255, 255, 0.12);
}
.ios-version {
border-top: 5px solid #007aff;
}
.android-version {
border-top: 5px solid #a4c639;
}
.plattform-symbol-icon {
font-size: 52px;
margin-bottom: 25px;
text-align: center;
transition: transform 0.4s ease;
}
.plattform-karte:hover .plattform-symbol-icon {
transform: scale(1.15);
}
.ios-version .plattform-symbol-icon {
color: #007aff;
}
.android-version .plattform-symbol-icon {
color: #a4c639;
}
.plattform-karte h3 {
font-size: 26px;
margin-bottom: 25px;
color: #fff;
text-align: center;
}
.plattform-karte p {
color: #ccc;
line-height: 1.7;
margin-bottom: 30px;
}
.plattform-schaltflache {
background: linear-gradient(90deg, #ff3131, #ff6a00);
color: white;
text-decoration: none;
padding: 15px 30px;
border-radius: 30px;
font-weight: bold;
text-align: center;
display: inline-block;
margin-top: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 6px 18px rgba(255, 49, 49, 0.35);
align-self: center;
}
.plattform-schaltflache:hover {
transform: translateY(-4px);
box-shadow: 0 9px 25px rgba(255, 49, 49, 0.45);
color: white;
}
.ios-version .plattform-schaltflache {
background: linear-gradient(90deg, #007aff, #00c2ff);
box-shadow: 0 6px 18px rgba(0, 122, 255, 0.35);
}
.ios-version .plattform-schaltflache:hover {
box-shadow: 0 9px 25px rgba(0, 122, 255, 0.45);
}
.android-version .plattform-schaltflache {
background: linear-gradient(90deg, #a4c639, #8bc34a);
box-shadow: 0 6px 18px rgba(164, 198, 57, 0.35);
}
.android-version .plattform-schaltflache:hover {
box-shadow: 0 9px 25px rgba(164, 198, 57, 0.45);
}
/* Support & Kontakt Section */
.support-kontakt-hauptbereich {
background-color: #0f0f18;
padding: 90px 0;
border-top: 1px solid #333;
position: relative;
}
.support-tabellen-container {
overflow-x: auto;
margin: 35px 0;
}
.support-ubersichts-tabelle {
width: 100%;
border-collapse: collapse;
background: rgba(20, 20, 35, 0.6);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.support-ubersichts-tabelle td {
padding: 18px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
color: #ccc;
transition: background-color 0.4s ease;
}
.support-ubersichts-tabelle tr:first-child td {
background: rgba(20, 20, 35, 0.8);
color: #ffd700;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 1.2px;
}
.support-ubersichts-tabelle tr:last-child td {
border-bottom: none;
}
.support-ubersichts-tabelle tr:hover td {
background-color: rgba(30, 30, 45, 0.6);
}
.support-leistungen-bereich {
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 35px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
margin-top: 35px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.4s ease;
}
.support-leistungen-bereich:hover {
transform: translateY(-6px);
border-color: rgba(255, 215, 0, 0.25);
}
.support-leistungen-bereich ul {
list-style-type: none;
padding-left: 0;
margin: 25px 0;
}
.support-leistungen-bereich li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
color: #ccc;
}
.support-leistungen-bereich li:before {
content: "\f058";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0;
color: #ff3131;
}
/* Sicherheit Section */
.sicherheit-standards-bereich {
background-color: #0a0a12;
padding: 90px 0;
border-top: 1px solid #333;
position: relative;
}
.sicherheits-tabellen-container {
overflow-x: auto;
margin: 35px 0;
}
.sicherheits-ubersichts-tabelle {
width: 100%;
border-collapse: collapse;
background: rgba(20, 20, 35, 0.6);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.sicherheits-ubersichts-tabelle td {
padding: 18px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
color: #ccc;
transition: background-color 0.4s ease;
}
.sicherheits-ubersichts-tabelle tr:first-child td {
background: rgba(20, 20, 35, 0.8);
color: #ffd700;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 1.2px;
}
.sicherheits-ubersichts-tabelle tr:last-child td {
border-bottom: none;
}
.sicherheits-ubersichts-tabelle tr:hover td {
background-color: rgba(30, 30, 45, 0.6);
}
.verantwortungsvolles-spielen-bereich {
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 35px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
margin-top: 35px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.4s ease;
}
.verantwortungsvolles-spielen-bereich:hover {
transform: translateY(-6px);
border-color: rgba(255, 215, 0, 0.25);
}
/* Spieler Feedback Section */
.spieler-feedback-bereich {
background-color: #0f0f18;
padding: 90px 0;
border-top: 1px solid #333;
position: relative;
}
.spieler-bewertung-tabellen-container {
overflow-x: auto;
margin: 35px 0;
}
.spieler-feedback-tabelle {
width: 100%;
border-collapse: collapse;
background: rgba(20, 20, 35, 0.6);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 35px;
}
.spieler-feedback-tabelle td {
padding: 18px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
color: #ccc;
transition: background-color 0.4s ease;
}
.spieler-feedback-tabelle tr:first-child td {
background: rgba(20, 20, 35, 0.8);
color: #ffd700;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 1.2px;
}
.spieler-feedback-tabelle tr:last-child td {
border-bottom: none;
}
.spieler-feedback-tabelle tr:hover td {
background-color: rgba(30, 30, 45, 0.6);
}
.nutzer-erfahrungsberichte {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 35px;
margin: 50px 0;
}
.erfahrungsbericht-karte {
background: linear-gradient(145deg, #151520, #1a1a25);
border-radius: 12px;
padding: 30px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
transition: transform 0.4s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.erfahrungsbericht-karte:hover {
transform: translateY(-6px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
border-color: rgba(255, 215, 0, 0.25);
}
.erfahrungsbericht-karte:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #ff3131, #ffd700);
}
.bewertung-sterne-anzeige {
color: #ffd700;
font-size: 20px;
margin-bottom: 18px;
}
.erfahrungsbericht-text {
color: #ccc;
font-style: italic;
margin-bottom: 18px;
line-height: 1.7;
position: relative;
padding-left: 25px;
}
.erfahrungsbericht-text:before {
content: '\201C';
font-size: 40px;
font-family: Georgia, serif;
position: absolute;
left: 0;
top: -18px;
color: rgba(255, 49, 49, 0.6);
}
.erfahrungsbericht-autor {
color: #999;
font-size: 15px;
text-align: right;
font-weight: 600;
}
/* Quickwin Vorteil Fazit Section */
.quickwin-vorteil-fazit-bereich {
background-color: #0a0a12;
padding: 90px 0;
border-top: 1px solid #333;
position: relative;
}
.quickwin-vorteil-tabellen-container {
overflow-x: auto;
margin: 35px 0;
}
.quickwin-vorteil-tabelle {
width: 100%;
border-collapse: collapse;
background: rgba(20, 20, 35, 0.6);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 35px;
}
.quickwin-vorteil-tabelle td {
padding: 18px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
color: #ccc;
transition: background-color 0.4s ease;
}
.quickwin-vorteil-tabelle tr:first-child td {
background: rgba(20, 20, 35, 0.8);
color: #ffd700;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 1.2px;
}
.quickwin-vorteil-tabelle tr:last-child td {
border-bottom: none;
}
.quickwin-vorteil-tabelle tr:hover td {
background-color: rgba(30, 30, 45, 0.6);
}
/* Abschließende Bonus-Hervorhebung */
.abschließende-bonus-hervorhebung {
background: linear-gradient(145deg, #1d0a0a, #2a0a0a);
border-radius: 18px;
padding: 45px;
margin: 50px auto;
max-width: 850px;
text-align: center;
box-shadow: 0 12px 35px rgba(255, 49, 49, 0.25);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 49, 49, 0.35);
transform: scale(1);
transition: transform 0.4s ease;
}
.abschließende-bonus-hervorhebung:hover {
transform: scale(1.025);
}
.abschließende-bonus-hervorhebung:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0) 70%);
top: -50%;
left: -50%;
animation: deutschland-kreis-rotation 12s infinite linear;
}
/* Social Media Teilen */
.soziale-medien-teilen {
margin: 50px 0;
text-align: center;
background: linear-gradient(145deg, #151520, #1a1a25);
padding: 35px;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.teilen-uberschrift {
text-align: center;
margin-bottom: 18px;
font-weight: bold;
color: #ccc;
font-size: 20px;
position: relative;
display: inline-block;
}
.teilen-uberschrift:before,
.teilen-uberschrift:after {
content: '';
position: absolute;
top: 50%;
width: 35px;
height: 1px;
background: linear-gradient(90deg, #ff3131, #ffd700);
}
.teilen-uberschrift:before {
left: -45px;
}
.teilen-uberschrift:after {
right: -45px;
}
.teilen-symbol-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
margin-top: 25px;
}
.soziales-symbol {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.soziales-symbol:hover {
transform: translateY(-4px) scale(1.15);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* Footer */
.haupt-fussbereich {
background-color: #0a0a0e;
padding: 60px 0;
border-top: 1px solid #333;
color: #888;
position: relative;
}
.haupt-fussbereich:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.08;
pointer-events: none;
}
.fuss-markenzeichen {
text-align: center;
margin-bottom: 35px;
}
.fuss-informationen {
max-width: 1100px;
margin: 0 auto;
}
.fuss-kennzeichnungen {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 35px;
margin-bottom: 35px;
padding-bottom: 35px;
border-bottom: 1px solid #333;
}
.alters-einschränkung {
display: flex;
align-items: center;
gap: 18px;
}
.alters-kennzeichen {
width: 45px;
height: 45px;
background-color: #ff3131;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
box-shadow: 0 4px 12px rgba(255, 49, 49, 0.35);
}
.alters-hinweis {
color: #aaa;
font-size: 15px;
}
.sicherheits-kennzeichnungen {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.sicherheits-kennzeichnung {
background: rgba(20, 20, 35, 0.8);
border-radius: 25px;
padding: 10px 18px;
color: #aaa;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.4s ease;
}
.sicherheits-kennzeichnung:hover {
background: rgba(30, 30, 45, 0.8);
transform: translateY(-3px);
}
.sicherheits-kennzeichnung i {
color: #ff3131;
}
.rechtliche-informationen {
text-align: center;
margin-bottom: 35px;
}
.rechtliche-informationen p {
color: #777;
font-size: 14px;
line-height: 1.7;
margin-bottom: 18px;
}
.verantwortung-verweis {
color: #ff3131;
text-decoration: none;
transition: color 0.4s ease;
}
.verantwortung-verweis:hover {
color: #ffd700;
text-decoration: underline;
}
.zahlungs-optionen {
text-align: center;
margin-top: 35px;
padding-top: 35px;
border-top: 1px solid #333;
}
.zahlungs-uberschrift {
font-size: 15px;
color: #aaa;
margin-bottom: 18px;
position: relative;
display: inline-block;
}
.zahlungs-uberschrift:before,
.zahlungs-uberschrift:after {
content: '';
position: absolute;
top: 50%;
width: 25px;
height: 1px;
background: rgba(255, 255, 255, 0.25);
}
.zahlungs-uberschrift:before {
left: -35px;
}
.zahlungs-uberschrift:after {
right: -35px;
}
.zahlungs-symbole {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
}
.zahlungs-symbol {
width: 50px;
height: 50px;
background: #151520;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #aaa;
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.zahlungs-symbol:hover {
color: #ffd700;
transform: translateY(-4px);
border-color: rgba(255, 215, 0, 0.25);
}
/* Responsive Design */
@media (max-width: 1200px) {
.motorsport-fahrzeug-grafik {
right: -250px;
transform: scale(0.85) rotate(-6deg);
}
h1 {
    font-size: 2.8rem;
}
}
@media (max-width: 992px) {
.plattform-ubersicht-container,
.sportwetten-inhalte-container {
grid-template-columns: 1fr;
}
.sport-kategorien-ubersicht {
    margin-bottom: 35px;
}

.willkommensbonus-details-bereich {
    padding: 25px;
}
}
@media (max-width: 768px) {
.oberste-navigationsbereich {
flex-direction: column;
gap: 18px;
padding: 18px;
}
.navigations-wrapper {
    width: 100%;
    justify-content: space-between;
}

.suchfeld-bereich {
    display: none;
}

.banner-hauptinhalt {
    padding: 20px 25px;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 2rem;
}

.motorsport-fahrzeug-grafik {
    display: none;
}

.vorteile-raster-layout,
.sport-kategorien-ubersicht {
    grid-template-columns: 1fr;
}

.primares-navigationsmenu {
    overflow-x: auto;
    justify-content: flex-start;
    padding: 12px 0;
}

.primares-navigationsmenu .menu-element {
    white-space: nowrap;
}

.registerkarten-inhalte {
    padding: 25px;
}

.registerkarte-schaltflache {
    padding: 18px 12px;
    font-size: 16px;
}

.registerkarte-schaltflache i {
    font-size: 18px;
}

.fuss-kennzeichnungen {
    flex-direction: column;
    gap: 25px;
}

.sicherheits-kennzeichnungen {
    justify-content: center;
}

.teilen-symbol-container {
    flex-wrap: wrap;
}

.willkommensbonus-hervorhebung {
    padding: 35px 25px;
}

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

.erfahrungsbericht-karte,
.sport-kategorie-option {
    margin-bottom: 25px;
}
}
@media (max-width: 480px) {
.benutzer-aktionsknopfe {
gap: 8px;
}
.einloggen-taste, 
.neu-registrieren-taste {
    padding: 10px 15px;
    font-size: 14px;
}

h1 {
    font-size: 2rem;
}

.hauptaktion-schaltflache, 
.bonus-aktivieren-knopf {
    padding: 15px 30px;
    font-size: 18px;
}

.alters-kennzeichen {
    width: 35px;
    height: 35px;
    font-size: 14px;
}

.alters-hinweis {
    font-size: 13px;
}

.sicherheits-kennzeichnung {
    font-size: 13px;
    padding: 8px 12px;
}

.rechtliche-informationen p {
    font-size: 13px;
}

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

.bonus-etikett {
    font-size: 16px;
}

.zahlungs-symbol {
    width: 40px;
    height: 40px;
    font-size: 18px;
}
}
@media (max-width: 768px) {
   .primares-navigationsmenu {
       overflow-x: auto;
       justify-content: flex-start;
       padding: 8px 0;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
       -ms-overflow-style: none;
   }

   .primares-navigationsmenu::-webkit-scrollbar {
       display: none;
   }

   .primares-navigationsmenu .menu-element {
       white-space: nowrap;
       flex-shrink: 0;
       min-width: auto;
       padding: 8px 16px;
       margin: 0 4px;
       font-size: 13px;
   }

   h1 {
       font-size: 2.2rem;
       margin-top: 20px;
       margin-bottom: 15px;
   }

   .banner-hauptinhalt {
       padding: 15px 25px;
       gap: 20px;
   }

   .banner-beschreibungstext {
       margin-bottom: 20px;
       padding: 20px;
   }

   .held-banner-abschnitt {
       min-height: auto;
       padding: 30px 0;
   }
}

@media (max-width: 480px) {
   h1 {
       font-size: 1.8rem;
       margin-top: 15px;
       margin-bottom: 12px;
   }

   .banner-hauptinhalt {
       padding: 10px 20px;
       gap: 15px;
   }

   .primares-navigationsmenu .menu-element {
       padding: 6px 12px;
       font-size: 12px;
   }
}