/* ASTRONAUTENBAR · LEBENSSYSTEME · Übersicht V5 */

.life-page {
    --life-green: #39D98A;
    --life-green-muted: #6FBF8F;
    --life-green-line: rgba(57, 217, 138, 0.44);
}

.life-overview { padding-bottom: 10px; }
.life-overview-back { margin-bottom: 30px; }

.life-overview-back a {
    color: var(--cyan);
    text-decoration: none;
    font-size: var(--font-meta);
    letter-spacing: .05em;
}
.life-overview-back a:hover { color: var(--accent); }

.life-overview-eyebrow {
    color: var(--life-green-muted);
    font-size: var(--font-meta);
    letter-spacing: .10em;
}

.life-overview-title {
    margin: 8px 0 0;
    color: var(--life-green);
    font-size: 1.45rem;
    letter-spacing: .07em;
    line-height: 1.25;
    text-shadow: 0 0 9px rgba(57,217,138,.12);
}

.life-overview-status {
    margin-top: 28px;
    padding: 13px 0;
    border-top: 1px solid var(--life-green-line);
    border-bottom: 1px solid var(--life-green-line);
    color: var(--cyan);
    font-size: var(--font-system);
    line-height: 1.9;
    letter-spacing: .025em;
}

.life-status-green { color: var(--life-green); }
.life-status-muted { color: var(--life-green-muted); }
.life-status-blink { animation: lifeStatusBlink 7.7s steps(1,end) infinite; }
.life-status-blink-alt { animation: lifeStatusBlinkAlt 10.3s steps(1,end) infinite; }

@keyframes lifeStatusBlink {
    0%,86%,100% { opacity:1; }
    87% { opacity:.28; }
    89% { opacity:1; }
}
@keyframes lifeStatusBlinkAlt {
    0%,92%,100% { opacity:1; }
    93% { opacity:.35; }
    95% { opacity:1; }
}

.life-overview-intro {
    margin-top: 27px;
    color: var(--life-green-muted);
    font-size: var(--font-system);
    letter-spacing: .055em;
}

/* Feiner und kleiner, angelehnt an die Areal-Kacheln im Gehirn */
.life-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 168px));
    gap: 12px;
    margin-top: 27px;
}

.life-tool-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid rgba(57,217,138,.34);
    border-radius: 1px;
    background: rgba(57,217,138,.012);
    color: var(--life-green);
    text-decoration: none;
}

.life-tool-card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
}

.life-tool-number {
    color: var(--life-green-muted);
    opacity: .72;
    font-size: var(--font-micro);
    letter-spacing: .10em;
}

.life-tool-card strong {
    color: var(--life-green);
    font-size: .96rem;
    line-height: 1.15;
    letter-spacing: .075em;
}

.life-tool-card-content > span:last-child {
    color: var(--life-green-muted);
    font-size: var(--font-micro);
    line-height: 1.45;
    letter-spacing: .025em;
}

.life-tool-card.is-online {
    cursor: pointer;
    transition: transform .16s steps(2,end),
                background .16s steps(2,end),
                border-color .16s steps(2,end);
}

.life-tool-card.is-online:hover,
.life-tool-card.is-online:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(57,217,138,.78);
    background: rgba(57,217,138,.045);
}

.life-tool-card.is-future {
    border-color: rgba(111,191,143,.18);
    background: transparent;
}

.life-tool-card.is-future strong {
    color: rgba(111,191,143,.72);
}

.life-tool-card.is-future .life-tool-number,
.life-tool-card.is-future .life-tool-card-content > span:last-child {
    color: rgba(111,191,143,.50);
}

.life-card-ripple {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(57,217,138,.27);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%,-50%) scale(.2);
    pointer-events: none;
    animation: lifeCardRipple 7.4s ease-out infinite;
}



@keyframes lifeCardRipple {
    0%,60% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
    63% { opacity:.36; transform:translate(-50%,-50%) scale(.5); }
    79% { opacity:.13; }
    94%,100% { opacity:0; transform:translate(-50%,-50%) scale(13); }
}

.life-overview-system-message {
    margin-top: 34px;
    max-width: 760px;
    color: var(--cyan);
    font-size: var(--font-system);
    line-height: 1.75;
}

@media (max-width: 620px) {
    .life-overview-status {
        font-size: var(--font-meta);
        line-height: 1.85;
    }
    .life-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 150px));
        gap: 10px;
    }
}

@media (max-width: 355px) {
    .life-tool-grid {
        grid-template-columns: 1fr;
        max-width: 168px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .life-card-ripple,
    .life-status-blink,
    .life-status-blink-alt {
        animation: none !important;
    }
}


/* V4: Einheitliche vertikale Typografie in allen Kacheln */
.life-tool-card-content {
    height: 100%;
    box-sizing: border-box;
    gap: 0;
}

.life-tool-card strong {
    width: 100%;
    height: 42%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 9px;
    box-sizing: border-box;
}

.life-tool-card-content > span:last-child {
    width: 100%;
    height: 58%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
    box-sizing: border-box;
}

.life-tool-card.is-future strong {
    letter-spacing: .16em;
}




/* V9: unregelmäßige, häufigere Lebenssignale
   Keine sichtbare Reihenfolge: jede Kachel hat ihren eigenen Zyklus. */

.life-tool-card:nth-child(1) .life-card-ripple-1 {
    animation-duration: 4.8s;
    animation-delay: -1.7s;
}
.life-tool-card:nth-child(1) .life-card-ripple-2 {
    animation-duration: 6.1s;
    animation-delay: -4.2s;
}

.life-tool-card:nth-child(2) .life-card-ripple-1 {
    animation-duration: 5.6s;
    animation-delay: -3.1s;
}
.life-tool-card:nth-child(2) .life-card-ripple-2 {
    animation-duration: 4.4s;
    animation-delay: -0.8s;
}

.life-tool-card:nth-child(3) .life-card-ripple-1 {
    animation-duration: 6.4s;
    animation-delay: -5.0s;
}
.life-tool-card:nth-child(3) .life-card-ripple-2 {
    animation-duration: 5.1s;
    animation-delay: -2.3s;
}

.life-tool-card:nth-child(4) .life-card-ripple-1 {
    animation-duration: 4.6s;
    animation-delay: -3.8s;
}
.life-tool-card:nth-child(4) .life-card-ripple-2 {
    animation-duration: 6.7s;
    animation-delay: -1.2s;
}

.life-tool-card:nth-child(5) .life-card-ripple-1 {
    animation-duration: 5.3s;
    animation-delay: -0.4s;
}
.life-tool-card:nth-child(5) .life-card-ripple-2 {
    animation-duration: 4.9s;
    animation-delay: -3.6s;
}

.life-tool-card:nth-child(6) .life-card-ripple-1 {
    animation-duration: 6.0s;
    animation-delay: -2.6s;
}
.life-tool-card:nth-child(6) .life-card-ripple-2 {
    animation-duration: 4.3s;
    animation-delay: -1.5s;
}