/* ----------------------------------------------------------------
   Rechtstexte: Impressum und Datenschutz.

   Die beiden Seiten sind die einzigen im Projekt, die gelesen werden
   müssen statt nur angeschaut. Deshalb hier eine schmalere Spalte,
   etwas mehr Zeilenabstand und ein ruhigerer Ton - aber dieselben
   Farben, Karten und Rundungen wie überall, damit sie nicht wie
   hineinkopiert wirken.

   Alles unter .recht, damit nichts in den Rest der Seite ausbricht.
   ---------------------------------------------------------------- */

.recht { max-width: 760px; }
.recht p { line-height: 1.68; }

/* Die Klartext-Marke steht hier als Seitenkopf - derselbe Stempel wie
   auf der Startseite, damit erkennbar ist, dass beides zusammengehoert. */
.recht > .klartext-marke { margin-bottom: 8px; }

.recht h1 { margin-bottom: 10px; }

.recht-lead {
    color: var(--muted);
    font-size: 1.06rem;
    margin-bottom: 30px;
}

/* Jeder Abschnitt eine eigene Karte - das trennt die Themen deutlicher
   als Überschriften allein und macht lange Texte überfliegbar. */
.recht-block { padding: 28px 32px; margin: 0 0 18px; }
.recht-block > h2 {
    margin: 0 0 14px;
    font-size: 1.16rem;
    line-height: 1.3;
}
.recht-block > :last-child { margin-bottom: 0; }

.recht-adresse { line-height: 1.75; }

.recht-liste { margin: 0 0 16px; padding-left: 22px; }
.recht-liste li { margin-bottom: 7px; line-height: 1.6; }

.recht-dl { margin: 0; }
.recht-dl dt { font-weight: 700; margin-top: 10px; }
.recht-dl dt:first-child { margin-top: 0; }
.recht-dl dd { margin: 2px 0 0; }

/* Ergänzende Anmerkungen: leiser, aber lesbar. */
.recht-hinweis {
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.6;
}

/* Der eine Absatz, der wirklich gelesen werden soll. */
.recht-warnung {
    border-left: 4px solid var(--klartext);
    background: var(--klartext-flaeche);
    padding: 16px 18px;
    border-radius: calc(var(--radius) - 7px);
    margin-bottom: 0;
}

.recht-zurueck { margin: 26px 0 0; }

/* Ausfüllstellen. Vor dem Livegang sollen sie ins Auge springen und
   nicht in der Wand aus Text untergehen. Wer alle [[ ]] ersetzt hat,
   sieht hier nichts mehr. */
.recht mark,
.recht .platzhalter {
    background: #ffe9a8;
    color: #3a2f00;
    padding: 0 3px;
    border-radius: 3px;
}

@media (max-width: 640px) {
    .recht-block { padding: 22px 20px; }
}

/* ------------------------------------------------------------------
   Kontaktformular
   ------------------------------------------------------------------ */

.kontakt-form label {
    display: block;
    margin: 18px 0 5px;
    font-weight: 700;
    font-size: .92rem;
}
.kontakt-form label:first-of-type { margin-top: 0; }

.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form textarea {
    width: 100%;
    padding: 11px 13px;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 7px);
    font: inherit;
}
.kontakt-form input:focus-visible,
.kontakt-form textarea:focus-visible {
    outline: 2px solid var(--klartext);
    outline-offset: 1px;
    border-color: var(--klartext);
}
.kontakt-form textarea { min-height: 170px; resize: vertical; }

.pflicht { color: var(--accent-alt); }

.feld-hinweis {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .84rem;
}

.kontakt-datenschutz {
    margin-top: 20px;
    padding-left: 14px;
    border-left: 3px solid var(--klartext);
}

/* Der Honigtopf. Nicht display:none - manche Spamprogramme erkennen das
   und lassen das Feld dann aus. Stattdessen aus dem sichtbaren Bereich
   geschoben; Screenreader ueberspringen ihn ueber aria-hidden. */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}