/* ============================================================
 * tebewe.eu — Einstiegsseite, Impressum, Datenschutz
 * 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;
    --link:         #2e7300;
}

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

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    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;
    margin-block: auto;
    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;
}

/* Leitzeile unter dem Logo */
.tagline {
    margin: 0;
    font-size: clamp(0.9rem, 3.2vw, 1.35rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--text-leise);
}

.tagline-sep {
    margin: 0 0.4em;
    color: var(--gruen);
    font-weight: 600;
}

@media (min-width: 560px) {
    .tagline     { letter-spacing: 0.08em; }
    .tagline-sep { margin: 0 0.5em; }
}

/* Fusszeile mit Rechtlichem — margin-block:auto an .stage schiebt sie nach unten */
.site-footer {
    padding-top: 2rem;
    font-size: 0.8rem;
    color: var(--text-leise);
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--link);
    text-decoration: underline;
}

.site-footer-sep {
    margin: 0 0.5em;
}

/* Textseiten (Impressum, Datenschutz) */
.legal {
    text-align: left;
    line-height: 1.6;
}

.legal-logo {
    display: block;
    width: 140px;
    margin: 0 auto 2rem;
}

.legal-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.legal h1 {
    margin: 0 0 1.5rem;
    font-size: 1.6rem;
    font-weight: 600;
}

.legal h2 {
    margin: 2rem 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.legal p,
.legal ul {
    margin: 0 0 1rem;
}

.legal a {
    color: var(--link);
}

.legal-updated {
    margin-top: 2.5rem;
    font-size: 0.8rem;
    color: var(--text-leise);
}