/* Gemeinsame Gestaltung der Rechtsseiten UND der Plus-Seite.

   ── DIE SCHRIFTEN (seit 22.09.2026) ──────────────────────────────────────

   Hier stand vorher: „Bewusst Systemschriften: diese Seiten dürfen keine
   externe Anfrage auslösen, und genau daran krankte die Startseite (Google
   Fonts)."

   Der erste Halbsatz stimmt weiterhin, die Schlussfolgerung nicht mehr. Die
   drei Familien liegen seit der Google-Fonts-Behebung LOKAL unter /fonts/
   (RECHTLICHES.md, Befund 1). Sie einzubinden ist deshalb eine Anfrage an den
   EIGENEN Ursprung – dieselbe Sorte wie die an diese Datei –, und die CSP
   erlaubt sie ausdrücklich: `font-src 'self'` in functions/_middleware.js.
   Es geht dabei keine IP-Adresse irgendwohin.

   WARUM SIE HIER STEHEN UND NICHT NUR IN plus.css: die Plus-Seite verlinkt
   AGB und Datenschutz. Läge die Schrift nur dort, wechselte das Aussehen
   genau beim Klick in den Vertragstext. Also entweder alle oder keine.

   Es sind Variable Fonts – eine Datei je Familie deckt alle Schnitte ab,
   daher die Bereichsangabe bei font-weight. Die Lizenztexte (SIL OFL 1.1)
   liegen daneben und müssen mit ausgeliefert werden; bitte nicht aufräumen. */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/jetbrains-mono-var.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --bg: #0e1014;
    --surface: #191d26;
    --line: #262c38;
    --ink: #fafafa;
    --soft: #d4d4d8;
    --mute: #a1a1aa;
    --lime: #c7f24e;
    /* Diese drei fehlten und standen deshalb hart in einzelnen Regeln. Alle
       Werte sind identisch zu tailwind.config.js, damit Startseite und
       Rechtsecke dieselben Farben zeigen und nicht auseinanderlaufen. */
    --lime-deep: #4e7a0a;
    --lime-glow: #dfff7a;
    --gold: #fbbf24;
    --schrift: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --schrift-display: 'Space Grotesk', Inter, system-ui, sans-serif;
    --schrift-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--soft);
    font-family: var(--schrift);
    font-size: 17px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

.wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 6rem;
}

a {
    color: var(--lime);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 3px;
}

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 9;
    background: var(--lime);
    color: var(--bg);
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
}

header.top {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    font-family: var(--schrift-display);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
}

nav.top a {
    margin-left: 1.25rem;
    font-size: 0.95rem;
}
nav.top a:first-child {
    margin-left: 0;
}

h1 {
    color: var(--ink);
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin: 2.5rem 0 0.5rem;
}

h2 {
    color: var(--ink);
    font-family: var(--schrift-display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 2.75rem 0 0.75rem;
}

h3 {
    color: var(--ink);
    font-family: var(--schrift-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    margin: 1.75rem 0 0.5rem;
}

.lead {
    color: var(--mute);
    font-size: 0.95rem;
    margin: 0 0 2rem;
}

address {
    font-style: normal;
}

dl.kv {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 1rem 0;
}
dl.kv dt {
    color: var(--mute);
    font-size: 0.9rem;
}
dl.kv dd {
    margin: 0;
    color: var(--ink);
}
@media (max-width: 34rem) {
    dl.kv {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    dl.kv dd {
        margin-bottom: 0.9rem;
    }
}

.box {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 0.9rem;
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0;
}

/* Platzhalter, die vor dem Veröffentlichen ersetzt werden MÜSSEN.
   Absichtlich unübersehbar – ein übersehener Platzhalter im Impressum ist
   schlimmer als ein hässlicher Kasten. */
.tbd {
    background: var(--gold);
    color: #0e1014;
    font-weight: 700;
    padding: 0.05em 0.4em;
    border-radius: 0.25em;
}

/* Für Felder, die JETZT korrekt "entfällt" sind (kein Gewerbe, keine
   Umsatzsteuer-ID …), aber sobald sich der Status ändert nachgetragen werden
   müssen. Bewusst ruhiger als .tbd – das hier ist kein Fehler, nur ein
   Zeitpunkt in der Zukunft. */
.later {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--mute);
}
.later::before {
    content: 'SPÄTER · ';
    color: var(--lime);
    font-weight: 700;
    letter-spacing: 0.04em;
}

table.dsg {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}
table.dsg th,
table.dsg td {
    text-align: left;
    vertical-align: top;
    padding: 0.6rem 0.9rem 0.6rem 0;
    border-bottom: 1px solid var(--line);
}
table.dsg th {
    color: var(--mute);
    font-weight: 600;
    white-space: nowrap;
}

footer.bottom {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--mute);
    font-size: 0.9rem;
}

ul {
    padding-left: 1.2rem;
}
li {
    margin: 0.35rem 0;
}

/* ── Kontaktformular (kontakt.html, 24.09.2026) ─────────────────────────── */
form.kontakt {
    display: grid;
    gap: 0.4rem;
    margin: 1.5rem 0 2rem;
}
form.kontakt label {
    margin-top: 0.8rem;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
}
form.kontakt .optional {
    color: var(--mute);
    font-weight: 400;
}
form.kontakt input,
form.kontakt textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}
form.kontakt input:focus,
form.kontakt textarea:focus {
    outline: 2px solid var(--lime);
    outline-offset: 1px;
}
form.kontakt button {
    justify-self: start;
    margin-top: 0.6rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--lime);
    color: var(--bg);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
form.kontakt .hinweis-klein {
    margin: 0.8rem 0 0;
    color: var(--mute);
    font-size: 0.85rem;
}
/* Die Falle fuer Bots: aus dem Bild, aber nicht display:none (manche Bots
   lassen versteckte Felder bewusst aus). */
form.kontakt .falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}