/* =========================================================
   lightningkid.com – Seite über den Streamer
   Schwarz, Orange nur für Knöpfe, Links und den Blitz,
   Rot nur für „live“. Schriften wie bei Crew Alert.
   ========================================================= */

:root {
    --night: #000000;
    --cloud: #1a1a1a;
    --rain: #a3a3a3;
    --paper: #f2f2f2;
    --bolt: #ff7a1a;
    --bolt-hover: #ff934a;
    --bolt-ink: #1a0b00;
    --live: #ff3b4d;
    --line: #ffffff1f;

    --display: "Big Shoulders Text", "Bahnschrift", "Segoe UI", sans-serif;
    --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--night);
    color: var(--paper);
    font: 400 17px/1.6 var(--body);
}

main, .lk-top, .lk-foot {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

a { color: var(--bolt); }
a:hover { color: var(--bolt-hover); }
:focus-visible { outline: 2px solid var(--bolt); outline-offset: 3px; }

h1, h2 { font-family: var(--display); margin: 0; }
h2 { font-size: 34px; font-weight: 800; line-height: 1.1; margin-bottom: 12px; }
p { margin: 0 0 12px; max-width: 64ch; }

/* ---------- Kopf ---------- */

.lk-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    padding-bottom: 22px;
}

.lk-name {
    font: 800 24px/1 var(--display);
    color: var(--paper);
    text-decoration: none;
}

.lk-social { display: flex; gap: 6px; }
.lk-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--paper);
}
.lk-social a:hover { background: var(--cloud); color: var(--bolt); }
.lk-social svg { width: 20px; height: 20px; }

/* Kanäle der Partner: kleiner, direkt unter dem Namen */
.lk-social.small { margin: 2px 0 0 -8px; gap: 2px; }
.lk-social.small a { width: 34px; height: 34px; color: var(--rain); }
.lk-social.small a:hover { color: var(--bolt); }
.lk-social.small svg { width: 18px; height: 18px; }

/* ---------- Status: das eine große Element ---------- */

.lk-status { padding: 40px 0 24px; }

.lk-state {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rain);
    font-weight: 500;
    margin-bottom: 8px;
}

.lk-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rain);
    flex: none;
}

.is-live .lk-state { color: var(--live); }
.is-live .lk-dot {
    background: var(--live);
    box-shadow: 0 0 0 0 var(--live);
    animation: lk-pulse 1.8s ease-out infinite;
}

@keyframes lk-pulse {
    to { box-shadow: 0 0 0 10px #ff3b4d00; }
}

.lk-big {
    font-weight: 900;
    font-size: clamp(56px, 7vw, 96px);
    line-height: 0.92;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
}

.lk-clock {
    display: block;
    color: var(--bolt);
}

.lk-title { font-size: 21px; font-weight: 500; }
.lk-meta { color: var(--rain); }

.lk-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 22px;
    border-radius: 6px;
    background: var(--bolt);
    color: var(--bolt-ink);
    font-weight: 600;
    text-decoration: none;
}
.lk-btn:hover { background: var(--bolt-hover); color: var(--bolt-ink); }
.is-live .lk-btn { background: var(--live); color: #fff; }

.lk-btn.ghost {
    background: transparent;
    color: var(--paper);
    box-shadow: inset 0 0 0 2px var(--line);
}
.lk-btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--bolt); color: var(--bolt); }

.lk-week {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    color: var(--rain);
}
.lk-week span { color: var(--paper); font-weight: 600; }
.lk-week em { font-style: normal; margin-left: 8px; }

/* Blitz als Trennlinie zwischen Status und dem Rest */
.lk-bolt {
    display: block;
    width: 100%;
    height: 40px;
    margin: 24px 0 48px;
}
.lk-bolt polyline {
    fill: none;
    stroke: var(--bolt);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: miter;
}

/* ---------- Abschnitte ---------- */

.lk-about {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 64px;
}

.lk-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 4px var(--cloud);
}

.lk-block {
    padding-top: 32px;
    border-top: 1px solid var(--line);
    margin-bottom: 64px;
}

.lk-links { display: flex; flex-wrap: wrap; gap: 10px; }
.lk-links .lk-btn { margin-top: 0; }

/* Logo der Orga als Überschrift */
.lk-org-logo { margin-bottom: 16px; }
.lk-org-logo a { display: inline-block; }
.lk-org-logo img { display: block; width: auto; height: 48px; max-width: 100%; }

/* Discord-Knopf in Discords eigener Farbe (Blurple) */
.lk-btn.discord {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #5865f2;
    color: #fff;
}
.lk-btn.discord:hover { background: #4752c4; color: #fff; }
.lk-btn.discord svg { width: 20px; height: 20px; }

.lk-channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 8px 48px;
}

/* Jeder Kanal ohne Rahmen, das Plattform-Logo ganz sichtbar rechts dahinter */
.lk-channels a {
    position: relative;
    display: block;
    min-height: 200px;
    padding: 24px 200px 24px 0;
    text-decoration: none;
    color: var(--paper);
    isolation: isolate;
}

.lk-channel-logo {
    position: absolute;
    z-index: -1;
    right: 0;
    top: 50%;
    width: 190px;
    height: 190px;
    transform: translateY(-50%) rotate(-8deg);
    opacity: 0.4;
    /* links kräftig, nach rechts hin ausgeblendet */
    -webkit-mask-image: linear-gradient(to right, #000 15%, #000b 40%, transparent 90%);
    mask-image: linear-gradient(to right, #000 15%, #000b 40%, transparent 90%);
    transition: opacity 0.2s ease;
}
.lk-channels a:hover .lk-channel-logo { opacity: 0.6; }

/* TikTok mit seinem Farbversatz aus Türkis und Pink */
.tiktok .cyan { fill: #25f4ee; transform: translate(-0.5px, -0.5px); }
.tiktok .pink { fill: #fe2c55; transform: translate(0.5px, 0.5px); }
.tiktok .white { fill: #fff; }

.lk-channels strong { display: block; font: 800 34px/1.1 var(--display); }
.lk-channels a:hover strong { color: var(--bolt); }
.lk-handle { display: block; color: var(--paper); font-weight: 600; margin-bottom: 10px; }
.lk-channels p { color: var(--rain); margin: 0; max-width: 30ch; }

@media (prefers-reduced-motion: reduce) {
    .lk-channel-logo { transition: none; }
}

.lk-partners {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.lk-partners li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 16px 0;
}
.lk-partners li + li { border-top: 1px solid var(--line); }
.lk-partners img, .lk-initial {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: none;
}
.lk-initial {
    display: grid;
    place-items: center;
    background: var(--cloud);
    font: 800 28px/1 var(--display);
    color: var(--rain);
}
.lk-partners li.is-live img { box-shadow: 0 0 0 3px var(--live); }
.lk-partners a { font: 800 26px/1.2 var(--display); text-decoration: none; }
.lk-partners .lk-social.small a { font: inherit; }
.lk-partners p { color: var(--rain); margin: 4px 0 0; }
.lk-partner-live {
    margin-left: 10px;
    color: var(--live);
    font-weight: 600;
    font-size: 15px;
}

/* ---------- Shoutout: Text links, rechts die Produktfotos ohne Namen ---------- */

.lk-shout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px 32px;
    align-items: center;
    margin-top: 20px;
}
.lk-shout-logo { display: block; width: 220px; max-width: 100%; height: auto; margin-bottom: 18px; }

/* Fotos ohne Rahmen, gedreht und nur an den Rändern weich ausgeblendet */
.lk-shout-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lk-product {
    display: block;
    transform: rotate(-8deg);
    opacity: 0.85;
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 75%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 75%, transparent 100%);
    transition: opacity 0.2s ease;
}
.lk-product:nth-child(even) { transform: rotate(6deg); }
.lk-product:hover { opacity: 1; }
.lk-product img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .lk-product { transition: none; }
}

/* ---------- Fuß ---------- */

.lk-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 24px;
    padding-bottom: 40px;
    border-top: 1px solid var(--line);
    color: var(--rain);
    font-size: 14px;
}
.lk-foot span { flex-basis: 100%; }

/* ---------- Handy ---------- */

@media (max-width: 640px) {
    main, .lk-top, .lk-foot { padding-left: 16px; padding-right: 16px; }
    .lk-status { padding-top: 28px; }
    .lk-about { flex-direction: column; gap: 20px; }
    .lk-avatar { width: 112px; height: 112px; }
    h2 { font-size: 30px; }
    .lk-shout { grid-template-columns: minmax(0, 1fr); }
    .lk-channels a { min-height: 160px; padding-right: 100px; }
    .lk-channel-logo { width: 140px; height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .is-live .lk-dot { animation: none; }
}