/* Info-Seite "So entsteht die Community-Einschaetzung" (docs/COMMUNITY_NEU.md, Etappe 5).
 * Grundgeruest wie die Rechtstext-Seiten (nutzungsbedingungen.html). */
/* Datenschutz Stand-Absatz */
.ce-stand {
    color: var(--text-muted);
    font-size: var(--text-14);
}
body {
    background: var(--bg);
    color: var(--text);
    transition:
        background-color 0.3s,
        color 0.3s;
    padding: 0;
    margin: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -44px;
    /* body.has-shared-footer (shared-footer.js) ist ein Flex-Container
     * mit flex-direction: column - dessen Default align-items: stretch
     * streckt auch absolut positionierte Kinder ohne eigene Breite auf
     * die volle Cross-Achse (= Viewport-Breite) statt auf den Inhalt. */
    width: fit-content;
    z-index: 1000;
    padding: var(--space-10) 14px;
    background: var(--accent);
    color: var(--card);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 12px;
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.container {
    max-width: 800px;
    margin: var(--space-24) auto;
    padding: 0 var(--space-16);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: var(--space-32);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px var(--shadow);
}

h1 {
    color: var(--text);
    margin-bottom: var(--space-24);
}

h2 {
    color: var(--text);
    margin-top: var(--space-32);
    margin-bottom: var(--space-16);
    font-size: var(--text-20);
}

p,
li {
    color: var(--text-muted);
    margin-bottom: var(--space-12);
    line-height: 1.6;
}

ul {
    margin-left: var(--space-24);
}

a {
    color: var(--accent-contrast);
    text-decoration: none;
}

@media (hover: hover) {
    a:hover {
        text-decoration: underline;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.container,
.card,
.card * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

ul {
    margin-left: 0;
    padding-left: var(--space-20);
}

@media (max-width: 480px) {
    .card {
        padding: var(--space-20);
    }
}

.ce-stufen {
    margin-left: 0;
    padding-left: var(--space-20);
}