:root {
    --cream: #fff9dc;
    --cream-2: #fff1b0;

    --yellow: #ffd31a;
    --yellow-2: #ffb800;

    --orange: #f57b00;
    --orange-2: #e94b00;

    --red: #c92b00;
    --red-dark: #8d1c00;

    --green: #4d8b19;
    --green-dark: #2f6410;

    --brown: #5e2b08;
    --text: #4d2a10;
    --muted: #7a5730;

    --line: #e5b13d;

    --shadow:
        0 10px 28px
        rgba(126, 68, 4, 0.16);
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(255, 211, 26, 0.38),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 8%,
            rgba(244, 93, 0, 0.17),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fffdf2,
            #fff0b0
        );

    color: var(--text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.46;
}



button,
select,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


button:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

/* Lotto-Familie
   --------------------------------------------------------- */

.lotto-family {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin: 10px 0;
}


.lotto-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 6px 14px;

    border: 2px solid;

    border-radius: 999px;

    color: #333;

    font-size: 0.86rem;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.lotto-badge:hover {
    transform: translateY(-1px);

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, 0.14);
}


/* Audio Lotto: weiß mit neutralem Rand */
.lotto-audio,
.lotto-audio:link,
.lotto-audio:visited {
    background: #124d78;
    border-color: #f3b31b;
    color: #fff;
}


/* Fibonacci Lotto: gelb mit orangem Rand */
.lotto-fibo, .lotto-fibo:link, .lotto-fibo:visited {
    background: #ffd51f;
    border-color: #ed7900;

    color: #333;
}


/* Kleroterion Lotto: weiß mit blauem Rand */
.lotto-klero, .lotto-klero:link, .lotto-klero:visited {
    background: #ffffff;
    border-color: #2586c7;

    color: #155b8c;
}



/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #fff7bd 0%,
            #ffd839 58%,
            #ff9400 100%
        );

    border-bottom:
        4px solid var(--red);

    box-shadow:
        0 8px 26px
        rgba(132, 57, 0, 0.17);
}


.hero::before,
.hero::after {
    content: "🌻";

    position: absolute;

    top: -18px;

    font-size: 7rem;
    line-height: 1;

    opacity: 0.96;
}


.hero::before {
    left: -20px;

    transform: rotate(-18deg);
}


.hero::after {
    right: -18px;

    transform: rotate(18deg);
}


.hero-inner {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    width: min(
        1320px,
        calc(100% - 36px)
    );

    margin: 0 auto;

    padding:
        22px 90px;
}


.hero-title h1 {
    margin: 0;

    color: #8c1f00;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.4rem, 6vw, 4.2rem);

    font-style: italic;

    line-height: 1;

    text-shadow:
        1px 2px 0
        rgba(255, 255, 255, 0.55);
}


.hero-subtitle {
    margin:
        9px 0 0;

    color:
        #6b2500;

    font-size:
        1.04rem;

    font-weight:
        750;
}


.hero-quote {
    max-width:
        350px;

    color:
        #9b2500;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.25rem;

    font-style:
        italic;

    font-weight:
        700;

    text-align:
        right;
}


.overline {
    margin:
        0 0 4px;

    color:
        #b13a00;

    font-size:
        0.74rem;

    font-weight:
        950;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


/* =========================================================
   PAGE / INTRO
   ========================================================= */

.page {
    width:
        min(
            1320px,
            calc(100% - 24px)
        );

    margin:
        18px auto 38px;
}


.intro-panel {
    margin-bottom:
        16px;

    padding:
        16px 20px;

    background:
        linear-gradient(
            120deg,
            #fff7bf,
            #fffdf2 55%,
            #ffd94a
        );

    border:
        1px solid var(--line);

    border-radius:
        15px;

    box-shadow:
        var(--shadow);
}


.intro-panel h2 {
    margin:
        0 0 7px;

    color:
        #a72f00;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.35rem;
}


.intro-panel p {
    margin:
        0;

    color:
        #5d3518;

    font-weight:
        580;
}


.intro-panel p + p {
    margin-top:
        7px;
}


/* =========================================================
   DREI-SPALTEN-LAYOUT
   ========================================================= */

.app-layout {
    display: grid;

    grid-template-columns:
        290px
        minmax(440px, 1fr)
        320px;

    gap:
        14px;

    align-items:
        start;
}


.settings-column,
.results-column {
    display: grid;

    gap:
        14px;
}


/* =========================================================
   CARDS
   ========================================================= */

.card {
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fffdf4,
            #fff0aa
        );

    border:
        1px solid var(--line);

    border-radius:
        16px;

    box-shadow:
        var(--shadow);
}


.settings-card,
.result-card,
.fib-card,
.nature-card,
.tip-card {
    padding:
        14px;
}


.card-title {
    display: flex;
    align-items: center;

    gap:
        8px;

    margin-bottom:
        12px;
}


.card-title h2,
.card-title h3 {
    margin:
        0;

    color:
        #7f2a00;
}


.card-title h2 {
    font-size:
        1.16rem;
}


.card-title h3 {
    font-size:
        1rem;
}


.card-title.small {
    margin-bottom:
        8px;
}


.card-icon {
    color:
        var(--green-dark);

    font-size:
        1.5rem;
}


.field {
    padding:
        11px 0;

    border-top:
        1px solid
        rgba(183, 122, 23, 0.20);
}


.field:first-of-type {
    border-top:
        0;
}


.field label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #542300;

    font-weight:
        900;
}


.field label small {
    color:
        #a43700;

    font-size:
        0.80em;
}


.field-note {
    margin:
        7px 0 0;

    color:
        #6f4a26;

    font-size:
        0.82rem;

    font-weight:
        560;
}


select,
input {
    width:
        100%;

    min-height:
        42px;

    padding:
        0 10px;

    background:
        #ffffff;

    color:
        #4c2c13;

    border:
        1px solid #d5a340;

    border-radius:
        8px;
}


.custom-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.custom-grid span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #76522c;

    font-size:
        0.75rem;

    font-weight:
        800;
}


.button-stack {
    display:
        grid;

    gap:
        9px;

    margin-top:
        10px;
}


.start-button,
.secondary-button,
.copy-button {
    min-height:
        44px;

    border:
        0;

    border-radius:
        999px;

    font-weight:
        900;
}


.start-button {
    background:
        linear-gradient(
            #eb3c00,
            #b61e00
        );

    color:
        #fff;

    box-shadow:
        0 5px 0 #811600;
}


.secondary-button {
    background:
        linear-gradient(
            #8aa936,
            #527918
        );

    color:
        #fff;

    box-shadow:
        0 4px 0 #35550e;
}


.copy-button {
    width:
        100%;

    margin-top:
        12px;

    background:
        linear-gradient(
            #ffd83c,
            #f3a900
        );

    color:
        #632400;

    border:
        1px solid #d88b00;
}


.tip-card p,
.nature-card p {
    margin:
        0;

    color:
        #5e3a1d;

    font-size:
        0.90rem;

    font-weight:
        560;
}


/* =========================================================
   MITTE / SONNENBLUME
   ========================================================= */

.flower-card {
    padding:
        14px;

    background:
        linear-gradient(
            145deg,
            #fff3a5,
            #ffca28 58%,
            #f27b00
        );

    border:
        1px solid #d97500;

    border-radius:
        16px;

    box-shadow:
        var(--shadow);
}


.flower-heading {
    margin-bottom:
        10px;

    text-align:
        center;
}


.flower-heading h2 {
    margin:
        0;

    color:
        #7e2100;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.5rem, 3vw, 2.2rem);
}


.flower-heading p {
    margin:
        4px 0 0;

    color:
        #713510;

    font-weight:
        700;
}


.canvas-shell {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at center,
            #321007 0%,
            #1b0b06 47%,
            #07120c 78%,
            #020907 100%
        );

    border:
        3px solid #9b3800;

    border-radius:
        18px;

    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.58),
        0 8px 22px rgba(116, 44, 0, 0.20);
}


#fibonacciCanvas {
    display:
        block;

    width:
        100%;

    height:
        100%;
}


.center-message {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    padding:
        9px 16px;

    background:
        rgba(255, 224, 65, 0.94);

    color:
        #8a2300;

    border:
        1px solid #ff9000;

    border-radius:
        999px;

    font-weight:
        900;

    pointer-events:
        none;

    transition:
        opacity .18s ease;
}


.center-message.hidden {
    opacity:
        0;
}


.action-status {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        8px;

    margin-top:
        10px;
}


.status-pill {
    padding:
        8px 9px;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid rgba(137, 70, 0, 0.27);

    border-radius:
        9px;
}


.status-pill span {
    display:
        block;

    color:
        #77491f;

    font-size:
        0.66rem;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.status-pill strong {
    color:
        #a82f00;
}


.current-draw {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        8px;

    margin-top:
        8px;
}


.current-draw > div {
    padding:
        8px;

    background:
        rgba(255, 245, 181, 0.86);

    border:
        1px solid rgba(149, 79, 0, 0.27);

    border-radius:
        9px;
}


.current-draw span {
    display:
        block;

    color:
        #754718;

    font-size:
        0.68rem;

    font-weight:
        850;

    text-transform:
        uppercase;
}


.current-draw strong {
    color:
        #b53100;

    font-size:
        1.18rem;
}


.draw-message {
    margin-top:
        8px;

    padding:
        10px 12px;

    background:
        rgba(85, 50, 12, 0.76);

    color:
        #fff7ce;

    border:
        1px solid rgba(255, 235, 133, 0.45);

    border-radius:
        999px;

    text-align:
        center;

    font-weight:
        750;
}


/* =========================================================
   RECHTS / ERGEBNISSE
   ========================================================= */

.results {
    display:
        grid;

    gap:
        10px;
}


.result-row {
    padding:
        10px;

    background:
        rgba(255, 255, 255, 0.67);

    border:
        1px solid rgba(211, 148, 31, 0.42);

    border-radius:
        11px;
}


.result-line {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.result-line + .result-line {
    margin-top:
        7px;
}


.result-label {
    width:
        100%;

    color:
        #7d2d00;

    font-size:
        0.82rem;

    font-weight:
        900;
}


.result-ball {
    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    background:
        radial-gradient(
            circle at 35% 28%,
            #fff9a1 0%,
            #ffd421 30%,
            #f78b00 63%,
            #d63c00 100%
        );

    color:
        #5f1d00;

    border:
        2px solid #fff1a0;

    border-radius:
        50%;

    font-weight:
        900;

    box-shadow:
        0 4px 10px rgba(122, 44, 0, 0.23);
}


.result-ball.extra {
    background:
        radial-gradient(
            circle at 35% 30%,
            #f7f7a7 0%,
            #a7c34b 40%,
            #4f7c18 100%
        );

    color:
        #24360f;
}


.placeholder,
.empty-history {
    color:
        #8e6a42;

    font-size:
        0.83rem;

    font-style:
        italic;
}


.fib-history {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.fib-chip {
    display:
        inline-grid;

    place-items:
        center;

    min-width:
        42px;

    height:
        36px;

    padding:
        0 9px;

    background:
        linear-gradient(
            #fff6b0,
            #ffd65a
        );

    color:
        #6f2700;

    border:
        1px solid #e7a01e;

    border-radius:
        999px;

    font-weight:
        900;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .app-layout {
        grid-template-columns:
            280px
            minmax(420px, 1fr);
    }

    .results-column {
        grid-column:
            1 / -1;

        grid-template-columns:
            1.2fr
            1fr
            1fr;
    }
}


@media (max-width: 820px) {

    .hero-inner {
        padding:
            20px 70px;
    }

    .hero-quote {
        display:
            none;
    }

    .app-layout {
        grid-template-columns:
            1fr;
    }

    .results-column {
        grid-column:
            auto;

        grid-template-columns:
            1fr;
    }

    .settings-column {
        grid-template-columns:
            1fr 1fr;
    }

    .settings-card {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 560px) {

    .hero::before,
    .hero::after {
        font-size:
            4.4rem;
    }

    .hero-inner {
        width:
            min(100% - 18px, 1320px);

        padding:
            16px 46px;
    }

    .hero-title h1 {
        font-size:
            2.35rem;
    }

    .hero-subtitle {
        font-size:
            0.9rem;
    }

    .page {
        width:
            min(100% - 14px, 1320px);
    }

    .settings-column {
        grid-template-columns:
            1fr;
    }

    .settings-card {
        grid-column:
            auto;
    }

    .action-status,
    .current-draw {
        grid-template-columns:
            1fr 1fr;
    }

    .draw-message {
        border-radius:
            12px;
    }

    .result-ball {
        width:
            36px;

        height:
            36px;
    }
}


/* =========================================================
   VERSION 1.6 – ECHTE SONNENBLUME IM HEADER
   ========================================================= */

/* Die früheren Emoji-Sonnenblumen werden vollständig entfernt. */
.hero::before,
.hero::after {
    display: none;
    content: none;
}

.hero {
    min-height: 190px;
}

.hero-inner {
    position: relative;

    min-height: 190px;

    padding:
        22px 320px 22px 28px;
}

.hero-title {
    position: relative;
    z-index: 2;

    max-width: 780px;
}

.hero-quote {
    max-width: 470px;

    margin-top: 12px;

    color: #9b2500;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.08rem;

    font-style: italic;

    font-weight: 700;

    text-align: left;
}

.hero-flower-wrap {
    position: absolute;

    right: 12px;
    top: 50%;

    width: 300px;
    height: 220px;

    transform:
        translateY(-50%);

    pointer-events: none;
}

.hero-flower {
    position: absolute;

    right: -4px;
    bottom: -85px;

    width: 310px;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 14px
            rgba(86, 52, 0, 0.18)
        );
}


/* Etwas kräftigerer Hintergrund, damit die freigestellte
   Sonnenblume klar und frisch wirkt. */
.hero {
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(255, 252, 198, 0.78),
            transparent 30%
        ),
        linear-gradient(
            110deg,
            #fff7bd 0%,
            #ffd839 58%,
            #ff9400 100%
        );
}


@media (max-width: 900px) {

    .hero-inner {
        padding-right: 220px;
    }

    .hero-flower-wrap {
        width: 215px;
    }

    .hero-flower {
        width: 235px;
        bottom: -58px;
    }
}


@media (max-width: 620px) {

    .hero {
        min-height: 160px;
    }

    .hero-inner {
        min-height: 160px;

        padding:
            16px 112px 16px 14px;
    }

    .hero-title h1 {
        font-size: 2.05rem;
    }

    .hero-subtitle {
        font-size: 0.82rem;
    }

    .hero-quote {
        margin-top: 7px;

        font-size: 0.88rem;
    }

    .hero-flower-wrap {
        right: 0;

        width: 112px;
        height: 150px;
    }

    .hero-flower {
        right: -28px;
        bottom: -18px;

        width: 165px;
    }
}


@media (max-width: 430px) {

    .hero-inner {
        padding-right: 90px;
    }

    .hero-title h1 {
        font-size: 1.78rem;
    }

    .hero-subtitle {
        display: none;
    }

    .hero-flower-wrap {
        width: 92px;
    }

    .hero-flower {
        right: -34px;

        width: 145px;
    }
}