/* ============================================================
 * tebewe.eu — Einstiegsseite
 * Farben aus dem Logo: #44aa00 (hell), #225500 (dunkel)
 * ==========================================================*/

:root {
    --gruen:        #44aa00;
    --gruen-dunkel: #225500;
    --text:         #1c1c1c;
    --text-leise:   #6b6b6b;
    --flaeche:      #ffffff;
    --grund:        #f4f6f2;
    --rand:         #e2e6dd;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text:       #e8e8e8;
        --text-leise: #9a9a9a;
        --flaeche:    #1f221e;
        --grund:      #141613;
        --rand:       #2e332b;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--grund);
    color: var(--text);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.stage {
    width: 100%;
    max-width: 720px;
    text-align: center;
}

/* Logo ist querformatig (880x632, auf die Zeichnung zugeschnitten).
   max-height haelt es auf flachen Fenstern im Rahmen. */
.logo {
    width: min(88vw, 560px);
    max-height: 45vh;
    height: auto;
    margin-bottom: 2.5rem;
}

/* Kacheln — eine Spalte auf schmalen Geraeten, sonst nebeneinander */
.links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 560px) {
    .links { grid-template-columns: repeat(3, 1fr); }
}

.card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.1rem 1rem;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--flaeche);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s;
}

.card:hover {
    border-color: var(--gruen);
    transform: translateY(-2px);
}

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

.card-sub {
    font-size: 0.8rem;
    color: var(--text-leise);
}

/* Noch nicht verfuegbar */
.card.is-disabled {
    opacity: 0.45;
    cursor: default;
}

.card.is-disabled:hover {
    border-color: var(--rand);
    transform: none;
}