/* startpage.css – Startseite im Retro-Terminal-Look
 * Farben kommen als Tokens (--rt-*) aus /css/retro.css (Dark/Light). Alles auf main.startpage begrenzt.
 */

.startpage {
    position: relative;
    max-width: 1100px;
    margin: 1.5rem auto;
    /* unten Platz für das Katzen-Bild (vorher: Hintergrund links unten) */
    padding: 0 0 clamp(6rem, 22vw, 10rem);
    background-color: var(--rt-bg);
    background-image: url(/media/bikercat.png);
    background-repeat: no-repeat;
    background-size: 235px;
    background-position: left bottom;
    color: var(--rt-text);
    font-family: var(--rt-mono);
    line-height: 1.6;
    word-break: break-word;
    border: 2px solid var(--rt-accent);
    box-shadow: 0 0 18px var(--rt-glow), inset 0 0 40px var(--rt-glow-inset);
    text-shadow: 0 0 4px var(--rt-glow-soft);
}

/* Fensterleiste */
.startpage::before {
    content: "ruben@norgall:~ $ ./start.sh";
    content: "ruben@norgall:~ $ ./start.sh" / "";
    display: block;
    margin-bottom: 1.25rem;
    padding: 6px 14px;
    background: var(--rt-accent);
    color: var(--rt-on-accent);
    font-weight: 700;
    font-size: 0.9rem;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CRT-Scanlines (dekorativ, blockiert keine Klicks) */
.startpage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        var(--rt-scan) 3px
    );
    z-index: 5;
}

/* ---------- Kopf ---------- */
.startpage .intro { padding: 0 1.25rem 1rem; }
.startpage .ueberschrift {
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1.15;
    color: var(--rt-accent);
    text-shadow: 0 0 10px var(--rt-glow);
}
.startpage .ueberschrift::before { content: "> "; content: "> " / ""; color: var(--rt-accent2); }
.startpage .ueberschrift::after {
    content: "_";
    content: "_" / "";
    color: var(--rt-accent2);
    animation: start-blink 1s steps(2, start) infinite;
}
.startpage .webtitle { color: var(--rt-accent2); font-size: 1.2rem; }
.startpage .webtitle::before { content: "<"; }
.startpage .webtitle::after { content: " />"; }

/* ---------- Karten ---------- */
.startpage .content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 0 1.25rem;
}
.startpage .halfsection { box-sizing: border-box; }

.startpage .term {
    border: 1px solid var(--rt-dim);
    background: var(--rt-panel);
    padding-bottom: 1rem;
}
.startpage .term > h2 {
    margin: 0;
    padding: 5px 12px;
    background: var(--rt-accent);
    color: var(--rt-on-accent);
    font-size: 1rem;
    text-shadow: none;
}
.startpage .term > h2::before { content: "~/ "; content: "~/ " / ""; }
.startpage .term > :not(h2) { margin-left: 16px; margin-right: 16px; }
.startpage .term > h2 + * { margin-top: 16px; }

.startpage .prompt::before { content: "$ echo $MAIL → "; content: "$ echo $MAIL → " / ""; color: var(--rt-dim); }
.startpage .hinweis { color: var(--rt-dim); }

/* Profilbild */
.startpage .profileimage { max-width: 100%; height: auto; }

/* ---------- Links / Fokus ---------- */
.startpage a { text-shadow: none; }
.startpage a:hover { text-shadow: 0 0 8px var(--rt-glow); }

/* ---------- Animation ---------- */
@keyframes start-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .startpage .ueberschrift::after { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .startpage { margin: 0.5rem; }
    .startpage .content { grid-template-columns: 1fr; }
}