@import url('/custom/assets/fonts/fonts.css');

/* ==========================================================================
   lottoportal.net – "Kleeblatt" design
   Ruhiges, redaktionelles Layout auf warmem Papier. Die vier Blütenblätter
   des Logos (Blau, Grün, Gelb, Magenta) sind die Akzentfarben.
   ========================================================================== */

:root {
    --primary: #00354d;
    --primary-dark: #00222f;
    --primary-soft: #0a4a68;
    --secondary: #c4105c;
    --secondary-dark: #9e0c4a;

    --petal-blue: #1f8bd3;
    --petal-green: #2b9b3a;
    --petal-yellow: #f8d417;
    --petal-magenta: #c4105c;

    --paper: #f5f2ea;
    --paper-deep: #ebe6d9;
    --surface: #ffffff;
    --header-bg: #ffffff;
    --ink: #1c2b33;
    --ink-soft: #55656e;
    --line: #ddd7c8;

    --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --font-body: 'Figtree', 'Segoe UI', sans-serif;

    --logo-height: 80px;
    --radius: 14px;
    --radius-leaf: 60% 0 60% 0;
    --shadow-soft: 0 1px 2px rgba(0, 53, 77, .06), 0 8px 24px -12px rgba(0, 53, 77, .18);
    --shadow-lift: 0 2px 4px rgba(0, 53, 77, .08), 0 18px 36px -14px rgba(0, 53, 77, .28);
    --t: .25s cubic-bezier(.2, .7, .2, 1);

    --petal-strip: linear-gradient(90deg,
        var(--petal-blue) 0 25%, var(--petal-green) 25% 50%,
        var(--petal-yellow) 50% 75%, var(--petal-magenta) 75% 100%);
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(rgba(0, 53, 77, .045) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--primary); text-decoration-color: rgba(196, 16, 92, .5); text-underline-offset: 3px; }
a:hover { color: var(--secondary); }

:focus-visible { outline: 3px solid var(--petal-blue); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--primary);
}

.container { max-width: 1140px; padding-inline: 1.25rem; }

.site-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--primary); color: #fff; padding: .6rem 1rem;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Header ---------- */
.outer-mainmenu-container,
.site-header {
    background-color: var(--header-bg);
    position: relative;
    z-index: 20;
}
.site-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: var(--petal-strip);
}
.site-header .navbar { padding: .75rem 0 1rem; gap: 1rem; }

.nav-logo { display: inline-flex; line-height: 0; }
.nav-logo .logo {
    height: var(--logo-height); width: auto; max-width: 100%;
    transition: transform var(--t);
}
.nav-logo:hover .logo { transform: rotate(-2deg) scale(1.03); }
.nav-logo-text { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--primary); }

.site-header .navbar-nav { gap: .25rem; align-items: center; }
.site-header .nav-link {
    position: relative;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--primary);
    padding: .5rem 1rem;
    border-radius: 999px;
    transition: background var(--t), color var(--t);
}
.site-header .nav-link:hover { background: var(--paper); color: var(--secondary); }
.site-header .nav-link.active { background: var(--primary); color: #fff; }

.site-header .navbar-toggler {
    border: 2px solid var(--primary); border-radius: 12px; padding: .45rem .6rem;
    background: transparent;
}
.site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2300354d' stroke-linecap='round' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
    .site-header .navbar-collapse { flex-basis: 100%; }
    .site-header .navbar-nav { align-items: stretch; padding: .5rem 0 0; }
    .site-header .nav-link { border-radius: 10px; }
    .nav-logo .logo { height: 64px; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar { padding: 1.1rem 0 0; font-size: .92rem; }
.breadcrumb { margin: 0; padding: 0; flex-wrap: wrap; }
.breadcrumb-item a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.breadcrumb-item a:hover { color: var(--secondary); }
.breadcrumb-item.active { color: var(--primary); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--petal-magenta); font-weight: 700; }

/* ---------- Hero ---------- */
.hero-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 90% at 85% 10%, rgba(31, 139, 211, .35), transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(196, 16, 92, .22), transparent 60%),
        var(--primary);
    color: #fff;
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 6.5rem);
}
.hero-leaves { position: absolute; inset: 0; pointer-events: none; }
.hero-leaves span {
    position: absolute; width: clamp(110px, 18vw, 230px); aspect-ratio: 1;
    border-radius: var(--radius-leaf); opacity: .9;
    animation: leaf-float 9s ease-in-out infinite;
}
.hero-leaves span:nth-child(1) { background: var(--petal-blue);    right: 9%;  top: -6%;  transform: rotate(0deg); }
.hero-leaves span:nth-child(2) { background: var(--petal-green);   right: -3%; top: 24%;  transform: rotate(90deg);  animation-delay: -2s; }
.hero-leaves span:nth-child(3) { background: var(--petal-yellow);  right: 9%;  top: 52%;  transform: rotate(180deg); animation-delay: -4s; }
.hero-leaves span:nth-child(4) { background: var(--petal-magenta); right: 21%; top: 24%;  transform: rotate(270deg); animation-delay: -6s; }
@keyframes leaf-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -12px; }
}

.hero-content { position: relative; z-index: 1; max-width: 1140px; }
.hero-badge {
    display: inline-block; margin: 0 0 1.25rem;
    font-family: var(--font-display); font-weight: 600; font-size: .9rem;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .35rem .9rem; border-radius: 999px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
}
.hero-section h1 {
    color: #fff; margin: 0 0 1rem;
    font-size: clamp(2.1rem, 5.4vw, 3.9rem); max-width: 22ch;
    text-wrap: balance;
}
.hero-slogan { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 34ch; color: rgba(255, 255, 255, .85); margin: 0 0 2rem; }

.hero-balls { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-balls span {
    display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    color: var(--primary); background: radial-gradient(circle at 30% 28%, #fff, #e7e1d0 75%);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .45), inset 0 -3px 5px rgba(0, 53, 77, .15);
    animation: ball-in .7s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.hero-balls span:nth-child(2) { animation-delay: .08s; }
.hero-balls span:nth-child(3) { animation-delay: .16s; }
.hero-balls span:nth-child(4) { animation-delay: .24s; }
.hero-balls span:nth-child(5) { animation-delay: .32s; }
.hero-balls span:nth-child(6) { animation-delay: .4s; background: radial-gradient(circle at 30% 28%, #ffe96a, var(--petal-yellow) 75%); }
@keyframes ball-in { from { opacity: 0; transform: translateY(-30px) scale(.6); } }

@media (max-width: 767.98px) {
    .hero-leaves { opacity: .35; }
}

/* ---------- Intro / Inhalt ---------- */
.intro-section { padding: 3rem 0 0; }
.intro-text { max-width: 760px; }

/* ---------- Vergleich ---------- */
.comparison-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.section-title {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 .5rem;
    display: flex; align-items: center; gap: .8rem;
}
.section-title::before {
    content: ''; flex: none; width: 1.1em; height: 1.1em;
    background: var(--petal-magenta); border-radius: var(--radius-leaf);
    box-shadow: .55em .55em 0 -.1em var(--petal-yellow);
    margin-right: .35em;
}
.section-lead { color: var(--ink-soft); font-size: 1.15rem; margin: 0 0 2rem; max-width: 60ch; }

.table-scroll { border-radius: var(--radius); box-shadow: var(--shadow-soft); background: var(--surface); overflow: hidden; }
.overview { width: 100%; border-collapse: collapse; }
.overview thead th {
    background: var(--primary); color: #fff;
    font-family: var(--font-display); font-weight: 600; font-size: .85rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 1rem 1.25rem; text-align: left;
}
.overview thead th:last-child { text-align: center; }
.overview tbody tr { border-bottom: 1px solid var(--line); transition: background var(--t); }
.overview tbody tr:last-child { border-bottom: 0; }
.overview tbody tr:hover { background: #fbf9f3; }
.overview td { padding: 1.15rem 1.25rem; vertical-align: middle; }

.provider-cell { width: 210px; }
.provider-cell a { display: inline-block; line-height: 0; transition: transform var(--t); }
.provider-cell a:hover { transform: scale(1.05); }
.provider-cell img { display: block; max-width: 150px; height: auto; }

.offers-cell ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.offers-cell li {
    font-size: .88rem; font-weight: 500; line-height: 1.2;
    padding: .35rem .75rem; border-radius: 999px;
    background: var(--paper); border: 1px solid var(--line); color: var(--primary);
}

.action-cell { text-align: center; width: 170px; }
.btn-play {
    display: inline-block; white-space: nowrap;
    font-family: var(--font-display); font-weight: 600; font-size: .98rem;
    padding: .65rem 1.3rem; border-radius: 999px;
    background: var(--primary); color: #fff; text-decoration: none;
    box-shadow: 0 4px 0 var(--primary-dark);
    transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.btn-play:hover { background: var(--secondary); color: #fff; box-shadow: 0 6px 0 var(--secondary-dark); transform: translateY(-2px); }
.btn-play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--secondary-dark); }

@media (max-width: 767.98px) {
    .table-scroll { background: transparent; box-shadow: none; overflow: visible; }
    .overview, .overview tbody, .overview tr, .overview td { display: block; width: 100%; }
    .overview thead { position: absolute; left: -9999px; }
    .overview tbody tr {
        background: var(--surface); border: 0; border-radius: var(--radius);
        box-shadow: var(--shadow-soft); margin-bottom: 1.1rem; padding: .5rem 0 1rem;
        border-top: 4px solid var(--petal-blue);
    }
    .overview tbody tr:nth-child(4n+2) { border-top-color: var(--petal-green); }
    .overview tbody tr:nth-child(4n+3) { border-top-color: var(--petal-yellow); }
    .overview tbody tr:nth-child(4n+4) { border-top-color: var(--petal-magenta); }
    .overview td { padding: .6rem 1.25rem; }
    .provider-cell, .action-cell { width: 100%; }
    .action-cell { text-align: left; }
}

/* ---------- Unterseiten ---------- */
.inner-wrapper { padding: 2rem 0 clamp(3rem, 7vw, 5rem); }
.page-body {
    background: var(--surface); border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: var(--shadow-soft);
    border-top: 5px solid transparent;
    border-image: var(--petal-strip) 1;
}
.page-body h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 1.5rem; }
.page-body h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2.25rem 0 .75rem;
    padding-left: 1rem; border-left: 5px solid var(--petal-magenta);
}
.page-body h2:nth-of-type(4n+2) { border-left-color: var(--petal-blue); }
.page-body h2:nth-of-type(4n+3) { border-left-color: var(--petal-green); }
.page-body h2:nth-of-type(4n+4) { border-left-color: var(--petal-yellow); }
.page-body h3 { font-size: 1.25rem; margin: 1.75rem 0 .5rem; }
.page-body p, .page-body li { max-width: 68ch; }
.page-body ul, .page-body ol { padding-left: 1.4rem; }
.page-body li::marker { color: var(--secondary); }
.page-body strong { color: var(--primary); }
.page-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.page-body th, .page-body td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.page-body th { background: var(--paper); }
.page-body iframe { border-radius: 10px; }
.page-body blockquote {
    margin: 1.5rem 0; padding: .75rem 1.25rem; background: var(--paper);
    border-left: 4px solid var(--petal-yellow); border-radius: 0 10px 10px 0;
}

/* Anmeldungsbestätigung: erste Überschrift groß */
.layout-page .page-body h1:only-child { margin-bottom: 0; }

/* Formulare */
.cms-form input[type=text], .cms-form input[type=email], .cms-form textarea, .cms-form select {
    width: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.cms-form button, .cms-form input[type=submit] {
    font-family: var(--font-display); font-weight: 600; border: 0; border-radius: 999px;
    padding: .7rem 1.6rem; background: var(--primary); color: #fff; cursor: pointer;
}
.cms-form button:hover { background: var(--secondary); }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--primary); color: rgba(255, 255, 255, .82); margin-top: auto; }
.site-footer::before { content: ''; display: block; height: 6px; background: var(--petal-strip); }
.footer-inner { padding: 3rem 0 1.5rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.footer-site-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: #fff; margin: 0 0 .35rem; letter-spacing: -.02em; }
.footer-slogan { margin: 0; max-width: 36ch; font-size: .98rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.footer-nav a { color: #fff; text-decoration: none; font-weight: 500; padding: .2rem 0; border-bottom: 2px solid transparent; }
.footer-nav a:hover { color: var(--petal-yellow); border-bottom-color: var(--petal-yellow); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; font-size: .88rem; }
.footer-bottom p { margin: 0; }

/* ---------- Cookie-Icon ---------- */
.cookieicon { background-color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}