.sl-wrap {
    --sl-night: #101722;
    --sl-night-deep: #070b11;
    --sl-panel: #17212d;
    --sl-line: #43505e;
    --sl-text: #f6f0e5;
    --sl-muted: #b9c0c7;
    --sl-gold: #e5a62c;
    --sl-gold-light: #ffd77c;
    --sl-orange: #ed7c22;
    --sl-red: #d74432;
    --sl-green: #399a54;

    max-width: 980px;
    margin: 0 auto 28px;
    overflow: hidden;
    color: #2d2a27;
    background: #eee8dc;
    border: 1px solid #c9bea9;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(26, 31, 48, .18);
}

.sl-wrap * { box-sizing: border-box; }

.sl-title {
    margin: 22px 20px 4px;
    color: #66451d;
    text-align: center;
    font-family: Georgia, serif;
}

.sl-sub {
    margin: 0 20px 20px;
    color: #69645d;
    text-align: center;
}

.sl-machine {
    margin: 0 18px;
    overflow: hidden;
    background: var(--sl-night);
    border: 2px solid #080b0f;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px #4c4131;
}

.sl-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(#4b321b, #17110c);
    border-bottom: 1px solid #07090c;
}

.sl-plate {
    padding: 5px 9px;
    color: var(--sl-gold-light);
    background: #100c08;
    border: 1px solid #8a652d;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: .1em;
}

.sl-status {
    color: #e1d5bd;
    font-size: .85rem;
    font-weight: 800;
    text-align: right;
}

.sl-main {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(260px, .9fr);
    gap: 18px;
    padding: 18px;
}

.sl-stage, .sl-controls { min-width: 0; }

.sl-sky {
    position: relative;
    overflow: hidden;
    padding: 18px 16px 16px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 25%, rgba(228, 116, 25, .22), transparent 37%),
        linear-gradient(#101923, #070b10);
    border: 1px solid #3b4650;
    border-radius: 9px;
}

.sl-sun-shell {
    width: min(330px, 100%);
    aspect-ratio: 1;
    margin: 0 auto 5px;
    overflow: hidden;
    background: #000;
    border-radius: 50%;
    box-shadow: 0 0 34px rgba(237, 124, 34, .28);
}

.sl-sun-shell img {
    display: block;
    width: 108%;
    height: 108%;
    object-fit: cover;
    border-radius: 50%;

    position: relative;
    left: -0%;
    top: -4%;
}

.sl-sun-name {
    color: var(--sl-gold-light);
    font: 700 1.25rem/1.2 Georgia, serif;
}

.sl-image-info {
    margin-top: 3px;
    color: #9ea9b2;
    font-size: .8rem;
}

.sl-activity {
    margin-top: 15px;
    padding: 11px;
    background: rgba(5, 9, 13, .72);
    border: 1px solid #3a4650;
    border-radius: 7px;
}

.sl-activity-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #d7c8ac;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sl-activity-head strong { color: var(--sl-gold-light); font-size: 1.05rem; }

.sl-meter {
    height: 18px;
    margin-top: 8px;
    overflow: hidden;
    background: #05080b;
    border: 1px solid #77818a;
    border-radius: 999px;
}

.sl-meter-fill {
    width: 0;
    height: 100%;
    background: var(--sl-green);
    border-radius: inherit;
    transition: width .6s ease, background-color .35s ease;
}

.sl-activity-label {
    margin-top: 6px;
    color: #c8d0d5;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sl-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 9px;
}

.sl-facts > div {
    padding: 10px 7px;
    background: rgba(5, 9, 13, .7);
    border: 1px solid #3a4650;
    border-radius: 6px;
}

.sl-facts > div > span,
.sl-facts > div > strong {
    display: block;
}

.sl-facts span {
    color: #8f9ca6;
    font-size: .7rem;
    text-transform: uppercase;
}

.sl-facts strong {
    margin-top: 3px;
    color: #f1d28a;
    font-size: .98rem;
}

.sl-facts small {
    display: block;
    margin-top: 4px;
    color: #9aa5ad;
    white-space: nowrap;
}

.sl-facts small #windKms,
.sl-facts small .sl-wind-rating {
    display: inline;
}

.sl-wind-rating {
    margin-left: 3px;
    font-weight: 700;
}

.sl-wind-rating[data-wind="low"] { color: #8fb7d0; }
.sl-wind-rating[data-wind="normal"] { color: #9fca9c; }
.sl-wind-rating[data-wind="elevated"] { color: #e4cf72; }
.sl-wind-rating[data-wind="fast"] { color: #efa35d; }
.sl-wind-rating[data-wind="very-fast"] { color: #ef7666; }

.sl-meaning { display: grid; gap: 10px; margin-top: 12px; }
.sl-meaning article {
    padding: 12px 14px;
    color: #ddd8ce;
    background: #151d25;
    border: 1px solid #3a4650;
    border-radius: 7px;
}
.sl-meaning h3 { margin: 0 0 5px; color: var(--sl-gold-light); font: 700 1rem/1.25 Georgia, serif; }
.sl-meaning p { margin: 0; color: #c7ced3; font-size: .88rem; line-height: 1.55; }
.sl-meaning .sl-storm { background: #431713; border: 2px solid var(--sl-red); box-shadow: 0 0 16px rgba(215,68,50,.2); }
.sl-meaning .sl-storm h3 { color: #ffb09e; }

.sl-controls {
    padding: 14px;
    color: #e4e8eb;
    background: #111922;
    border: 1px solid #3a4650;
    border-radius: 8px;
}

.sl-row { margin-bottom: 14px; }
.sl-controls label { display:block; margin-bottom:5px; color:var(--sl-gold-light); font-size:.78rem; font-weight:800; letter-spacing:.06em; }
.sl-controls select, .sl-controls input { width:100%; padding:9px; color:#222; background:#f3f0e8; border:1px solid #7b8490; border-radius:5px; }

.sl-custom { margin-bottom:13px; padding:10px; background:#0b1117; border:1px solid #35414a; border-radius:6px; }
.sl-custom[hidden] { display:none; }
.sl-custom-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.sl-personal { margin:13px 0; padding:11px; color:#cbd2d7; background:#18232d; border-left:3px solid var(--sl-gold); border-radius:4px; }
.sl-personal span { display:block; margin-bottom:4px; color:var(--sl-gold-light); font-weight:800; }
.sl-personal p { margin:0; font-size:.82rem; line-height:1.45; }

.sl-button, .sl-new-button {
    width:100%; padding:12px 14px; color:#251804;
    background:linear-gradient(#ffd470,#e9a027); border:2px solid #956014; border-radius:6px;
    font-weight:900; letter-spacing:.06em; cursor:pointer;
}
.sl-button:disabled { opacity:.45; cursor:not-allowed; }
.sl-reload { width:100%; margin-top:7px; padding:7px; color:#c8d0d5; background:transparent; border:1px solid #52606b; border-radius:5px; cursor:pointer; }

.sl-codepanel { margin-top:12px; padding:9px; color:#ffe2a4; background:#06090c; border:1px solid #4d5358; border-radius:5px; text-align:center; font:700 .82rem/1.4 monospace; word-break:break-word; }
.sl-small { margin-top:9px; color:#9eabb4; font-size:.76rem; line-height:1.45; }
.sl-small code { color:var(--sl-gold-light); }

.sl-result { margin:16px 18px; padding:17px; text-align:center; background:#fffaf0; border:1px solid #c9a65d; border-radius:9px; }
.sl-result-label { margin-bottom:11px; color:#684a18; font-weight:800; letter-spacing:.08em; }
.sl-number-groups { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.sl-number-group { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.sl-number-group.extra { margin-left:10px; padding-left:14px; border-left:2px solid #d4b56b; }
.sl-ball { display:grid; place-items:center; width:44px; height:44px; color:#332006; background:radial-gradient(circle at 35% 28%,#fff3b2,#ffc34c 45%,#e38a16 80%); border:2px solid #d99b2b; border-radius:50%; box-shadow:0 2px 6px #0002,0 0 9px rgba(235,157,31,.25); font-weight:900; }
.sl-number-group.extra .sl-ball { background:linear-gradient(#fff7d4,#ead487); border-color:#aa873e; }
.sl-result-moment { margin-top:10px; color:#746a5a; font-size:.8rem; }
.sl-new-button { max-width:280px; margin-top:14px; }
.sl-footer { padding:12px 18px 16px; color:#6c665c; text-align:center; font-size:.82rem; }

.sl-wrap[data-activity="low"] .sl-meter-fill { background:#3c9a55; }
.sl-wrap[data-activity="medium"] .sl-meter-fill { background:#c9b72e; }
.sl-wrap[data-activity="high"] .sl-meter-fill { background:#ef8a24; }
.sl-wrap[data-activity="very-high"] .sl-meter-fill { background:#d74432; }

@media(max-width:700px) {
    .sl-main { grid-template-columns:1fr; padding:12px; }
    .sl-machine { margin:0 10px; }
    .sl-topbar { align-items:flex-start; flex-direction:column; }
    .sl-status { text-align:left; }
    .sl-sun-shell { width:min(330px,78vw); }
    .sl-result { margin:14px 10px; }
}

@media(max-width:420px) {
    .sl-facts { grid-template-columns:1fr; }
    .sl-custom-grid { grid-template-columns:1fr 1fr; }
    .sl-number-group.extra { width:100%; margin:7px 0 0; padding:10px 0 0; border-left:0; border-top:1px solid #d4b56b; }
}


/* ============================================================
   ZAHLENANIMATION
   Die Ergebniszahlen erscheinen nacheinander und leuchten kurz auf.
   ============================================================ */

.sl-ball-reveal {
    opacity: 0;
    transform: scale(.55);
    animation: sl-number-reveal 620ms cubic-bezier(.2, .8, .25, 1.15) forwards;
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes sl-number-reveal {
    0% {
        opacity: 0;
        transform: scale(.55);
        filter: brightness(1);
        box-shadow: 0 2px 6px #0002, 0 0 0 rgba(255, 190, 54, 0);
    }

    45% {
        opacity: 1;
        transform: scale(1.14);
        filter: brightness(1.5);
        box-shadow: 0 2px 6px #0002, 0 0 24px rgba(255, 190, 54, .9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-ball-reveal {
        opacity: 1;
        transform: none;
        animation: none;
    }
}