:root {
    --farbe-hintergrund: #041919;
    --farbe-hintergrund-alt: #072626;
    --farbe-karte: #0b2e2e;
    --farbe-kopf: rgba(3, 12, 12, 0.95);
    --farbe-primaer: #f2c86a;
    --farbe-primaer-hell: #ffd980;
    --farbe-primaer-dunkel: #c49b3f;
    --farbe-text: #f5f7f7;
    --farbe-text-blass: #c0d1d1;
    --farbe-rahmen: rgba(255, 255, 255, 0.08);

    --radius-karte: 18px;
    --radius-pill: 999px;

    --schatten-weich: 0 18px 40px rgba(0, 0, 0, 0.55);
    --schatten-klein: 0 8px 22px rgba(0, 0, 0, 0.5);

    --tempo-schnell: 0.18s ease-out;
    --tempo-normal: 0.25s ease-out;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--farbe-text);
    background:
        radial-gradient(circle at 0% 0%, #0b4a34 0, transparent 40%),
        radial-gradient(circle at 100% 100%, #09654a 0, transparent 45%),
        linear-gradient(160deg, #020707, #030f10 65%, #020707 100%);
}

a {
    color: var(--farbe-primaer);
    text-decoration: none;
}

a:hover {
    color: var(--farbe-primaer-hell);
}

p {
    line-height: 1.6;
    color: var(--farbe-text);
}

h1, h2, h3 {
    margin-top: 0;
    font-weight: 600;
}

.bereich {
    width: min(1200px, 100% - 2.5rem);
    margin-inline: auto;
}

/* Kopfbereich */

.haupt-kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--farbe-kopf);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--farbe-rahmen);
}

.kopf-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.75rem 0;
}

.zeichenmarke {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--farbe-primaer);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 0.95rem;
}

.zeichenmarke-symbol {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 20%, #ffffff 0, #ffe8b2 30%, transparent 60%),
        linear-gradient(145deg, #f0c86a, #c79d3c);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
    position: relative;
}

.zeichenmarke-symbol::before,
.zeichenmarke-symbol::after {
    content: "";
    position: absolute;
    background: #1a1914;
}

.zeichenmarke-symbol::before {
    bottom: 7px;
    left: 7px;
    right: 7px;
    height: 13px;
    border-radius: 3px 3px 0 0;
}

.zeichenmarke-symbol::after {
    top: 4px;
    left: 13px;
    width: 6px;
    height: 10px;
    border-radius: 3px 3px 0 0;
}

.navigation-haupt ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.navigation-haupt a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--farbe-text-blass);
    position: relative;
    padding-bottom: 0.25rem;
}

.navigation-haupt a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.1rem;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--farbe-primaer), var(--farbe-primaer-dunkel));
    transition: width var(--tempo-schnell);
}

.navigation-haupt a:hover::after {
    width: 100%;
}

.anmelde-bereich {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Knöpfe */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background var(--tempo-normal),
        color var(--tempo-normal),
        box-shadow var(--tempo-schnell),
        transform var(--tempo-schnell),
        border-color var(--tempo-schnell);
}

.knopf-primaer {
    background: linear-gradient(135deg, var(--farbe-primaer), var(--farbe-primaer-dunkel));
    color: #15110a;
    box-shadow: var(--schatten-klein);
}

.knopf-primaer:hover {
    transform: translateY(-1px);
    box-shadow: var(--schatten-weich);
}

.knopf-sekundaer {
    background: transparent;
    color: var(--farbe-primaer);
    border-color: rgba(242, 200, 106, 0.55);
}

.knopf-sekundaer:hover {
    background: rgba(242, 200, 106, 0.08);
    box-shadow: var(--schatten-klein);
}

.knopf-gross {
    padding: 0.9rem 2.2rem;
    font-size: 0.95rem;
}

.knopf-mini {
    padding: 0.45rem 1.1rem;
    font-size: 0.8rem;
}

/* Fester Spielen-Knopf */

.fest-knopf-spielen {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.8rem;
    border-radius: var(--radius-pill);
    background:
        radial-gradient(circle at 20% 0%, #ffffff 0, #ffe9b5 25%, transparent 60%),
        linear-gradient(135deg, #f2c86a, #c79b3f);
    color: #17120a;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
}

.fest-knopf-spielen:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.8);
}

/* Hero-Bereich */

.hero-bereich {
    padding: 2.5rem 0 3rem;
    background:
        radial-gradient(circle at 15% 0%, rgba(13, 102, 74, 0.65) 0, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(11, 58, 58, 0.9) 0, transparent 50%),
        linear-gradient(150deg, #041313, #020707);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-inhalt-rahmen {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.4fr);
    align-items: center;
    gap: 2.5rem;
}

.hero-inhalt {
    max-width: 520px;
}

.hero-slogan {
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--farbe-primaer);
    margin-bottom: 0.7rem;
}

.hero-titel {
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    margin-bottom: 0.8rem;
}

.hero-text {
    color: var(--farbe-text-blass);
    margin-bottom: 1.4rem;
}

.hero-cta {
    margin-top: 0.4rem;
}

.hero-grafik {
    border-radius: 32px;
    min-height: 260px;
    background:
        linear-gradient(145deg, rgba(6, 66, 52, 0.9), rgba(3, 22, 22, 0.95)),
        radial-gradient(circle at 20% 10%, rgba(248, 218, 135, 0.35) 0, transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(94, 232, 183, 0.18) 0, transparent 55%);
    box-shadow: 0 26px 55px rgba(0, 0, 0, 0.85);
    position: relative;
    overflow: hidden;
}

.hero-grafik::before,
.hero-grafik::after {
    content: "";
    position: absolute;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(4, 21, 20, 0.75);
}

.hero-grafik::before {
    width: 120px;
    height: 160px;
    top: 18%;
    left: 12%;
    transform: rotate(-14deg);
}

.hero-grafik::after {
    width: 120px;
    height: 160px;
    bottom: 10%;
    right: 10%;
    transform: rotate(12deg);
}

/* Einleitung */

.einfuehrung {
    padding: 3rem 0 2rem;
}

.einfuehrung h1 {
    font-size: clamp(1.8rem, 2.8vw, 2.2rem);
    margin-bottom: 1rem;
}

.einfuehrung p + p {
    margin-top: 0.75rem;
}

/* Infobereich */

.infobereich {
    padding: 1rem 0 3.5rem;
}

.infoblock {
    background: var(--farbe-karte);
    border-radius: var(--radius-karte);
    padding: 1.6rem 1.7rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--farbe-rahmen);
    box-shadow: var(--schatten-klein);
    position: relative;
}

.infoblock h2 {
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
}

.infoblock h2 a {
    color: inherit;
}

.infoblock ol,
.infoblock ul {
    padding-left: 1.2rem;
    margin-top: 0.35rem;
}

.infoblock li {
    margin-bottom: 0.3rem;
}

.cta-zentrum {
    margin-top: 1.1rem;
    text-align: center;
}

/* Tabellen */

.tabelle-wrapper {
    overflow-x: auto;
    margin: 1.1rem 0;
}

.tabelle-bonus,
.tabelle-zahlung,
.tabelle-spiele {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabelle-bonus th,
.tabelle-bonus td,
.tabelle-zahlung th,
.tabelle-zahlung td,
.tabelle-spiele th,
.tabelle-spiele td {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.65rem 0.6rem;
    vertical-align: top;
}

.tabelle-bonus thead,
.tabelle-zahlung thead,
.tabelle-spiele thead {
    background: rgba(0, 0, 0, 0.35);
}

.tabelle-bonus tbody tr:nth-child(even),
.tabelle-zahlung tbody tr:nth-child(even),
.tabelle-spiele tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.18);
}

.tabelle-spiele img {
    max-width: 120px;
    border-radius: 10px;
    display: block;
    box-shadow: var(--schatten-klein);
}

/* FAQ */

.faq-liste {
    margin-top: 1rem;
}

.faq-eintrag + .faq-eintrag {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.faq-eintrag h3 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

/* Fussbereich */

.fussbereich {
    background: #020707;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 2rem;
}

.fuss-gitter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-bottom: 1.5rem;
}

.fuss-spalte h3 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
}

.fuss-spalte ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fuss-spalte li {
    margin-bottom: 0.45rem;
}

.fuss-spalte a {
    color: var(--farbe-text-blass);
    font-size: 0.9rem;
}

.fuss-spalte a:hover {
    color: var(--farbe-primaer);
}

.liste-verantwortung li::before {
    content: "∙";
    margin-right: 0.35rem;
    color: var(--farbe-primaer);
}

.schema-adresse {
    font-size: 0.9rem;
    color: var(--farbe-text-blass);
}

.org-name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: var(--farbe-text);
}

.fuss-juristisch {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--farbe-text-blass);
}

.fuss-unterteil {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.9rem 0 1.4rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--farbe-text-blass);
}

/* Responsiv */

@media (max-width: 960px) {
    .hero-inhalt-rahmen {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-grafik {
        min-height: 220px;
    }
}

@media (max-width: 820px) {
    .kopf-innen {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .navigation-haupt {
        order: 3;
        width: 100%;
    }

    .navigation-haupt ul {
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .anmelde-bereich {
        margin-left: auto;
    }

    .fest-knopf-spielen {
        left: 50%;
        transform: translateX(-50%);
        bottom: 1rem;
    }
}

@media (max-width: 640px) {
    .fuss-gitter {
        grid-template-columns: 1fr;
    }

    .infoblock {
        padding: 1.4rem 1.3rem;
    }

    .hero-bereich {
        padding-top: 2rem;
    }

    .fest-knopf-spielen {
        padding-inline: 1.4rem;
    }
}