/* ==========================================================================
   Rechtsseiten (Impressum, Datenschutz, Barrierefreiheit) und Fehlerseiten (403, 404, 500)
   Kein eigenes Konzeptbild. Hero wie docs/konzept/2-Leistungen-Websites.png, Text als Textwand
   mit violetter Kante wie docs/konzept/8-Ueber-mich.png (Kante 3 px, Einzug 24 px), kompakter Fuß.
   Nur, was es außerhalb dieser Seiten nicht gibt.
   ========================================================================== */


/* Hero: Hinweise unter dem Absatz (Stand, Kurzangaben) ------------------------- */

/* „Datenschutzerklärung“ passt bei 390 px nicht in eine Zeile: datenschutz.php setzt dafür ein
   weiches Trennzeichen (U+00AD), das nur greift, wenn das Wort sonst umbrechen müsste. */
.recht-hero .hero__inhalt > .lead { margin-bottom: 0; }
.recht-hero .chips { margin-top: var(--a-8); }
.recht-hero .chip svg { width: 1.15em; height: 1.15em; margin-right: var(--a-2); flex: none; color: var(--label); }
.recht-stand { margin-top: var(--a-6); font-size: var(--gr-klein); color: var(--tx3); }
.recht-stand strong { color: var(--tx2); }


/* Textfläche: Textspalte links, rechts die Inhaltsübersicht (Datenschutz) oder
   die Gewerbeberechtigungen (Impressum); unter 960 px alles untereinander ------- */

.recht { display: grid; gap: var(--a-10); align-items: start; }
.recht__text { min-width: 0; }
@media (min-width: 960px) {
    .recht--mit-inhalt,
    .recht--mit-seite { grid-template-columns: minmax(0, 44rem) minmax(0, 20rem); justify-content: space-between; column-gap: var(--a-8); }
    .recht--mit-inhalt > .recht__text { grid-column: 1; grid-row: 1; }
    .recht--mit-inhalt > .recht__inhalt { grid-column: 2; grid-row: 1; }
    /* Impressum: Gewerbeberechtigungen rechts neben den ersten Angaben; im Quelltext und am Handy
       bleiben sie an ihrer Stelle in der Reihenfolge */
    .recht--mit-seite > .recht__text:first-child { grid-column: 1; grid-row: 1; }
    .recht--mit-seite > .recht__seite { grid-column: 2; grid-row: 1 / span 2; }
    .recht--mit-seite > .recht__text:last-child { grid-column: 1; grid-row: 2; }
}
.recht--mit-seite { row-gap: var(--a-12); }
.recht__seite .raster { --luecke: var(--a-3); }
@media (min-width: 640px) and (max-width: 959px) {
    .recht__seite .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .recht__seite .raster { grid-template-columns: minmax(0, 1fr); }
}

/* Die Übersicht bleibt beim Lesen stehen, wenn das Fenster hoch genug für sie ist.
   overflow: clip statt hidden am Abschnitt, sonst wäre er der Bezugsrahmen und nichts klebte. */
@media (min-width: 960px) and (min-height: 720px) {
    .abschnitt:has(.recht__inhalt) { overflow: clip; }
    .recht__inhalt { position: sticky; top: calc(var(--kopf-hoehe) + var(--a-6)); }
}

.recht__inhalt { padding: var(--a-6); }
.recht__inhalt h2 { margin-bottom: var(--a-3); }
.recht__inhalt ol { display: grid; gap: var(--a-1); }
.recht__inhalt a {
    display: block;
    padding: var(--a-1) 0;
    font-size: var(--gr-klein);
    line-height: 1.45;
    color: var(--tx2);
    text-decoration-line: var(--link-deko);
}
.recht__inhalt a:hover { color: var(--link); text-decoration-line: underline; }
@media (min-width: 640px) and (max-width: 959px) {
    .recht__inhalt ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-6); }
}


/* Abschnitte: Überschrift über der Kante, Text eingerückt (Textwand) ----------- */

.recht__abschnitt + .recht__abschnitt { margin-top: var(--a-12); }
.recht__abschnitt > h2 { margin-bottom: var(--a-4); font-size: var(--gr-kasten); line-height: 1.25; }
.recht__abschnitt > .label + h2 { margin-top: var(--a-3); }

/* Schrift, Zeilenhöhe und Kante wie .textwand (17 px, Kante ragt über die erste und unter die
   letzte Zeile hinaus); schmaler als dort: 35 rem Text bei 17 px ergeben höchstens rund 75 Zeichen
   je Zeile (Bauauftrag: 65–75), das Konzept zeigt längere Zeilen */
.recht__wand {
    max-width: calc(35rem + var(--a-6) + var(--kante-breite));
    padding: var(--a-4) 0 var(--a-5) var(--a-6);
    border-left: var(--kante-breite) solid var(--c-textwand-kante);
    font-size: var(--gr-lead);
    line-height: 1.7;
    color: var(--tx2);
}
.recht__wand > * + * { margin-top: var(--a-4); }
/* Am Handy lange Wörter trennen („Verbraucherschlichtungsstelle“), statt ein einzelnes Wort allein in
   eine Zeile zu stellen. Der Wortlaut bleibt; Adressen und Links werden nicht getrennt. */
@media (max-width: 639px) {
    .recht__wand, .recht-kasten { hyphens: auto; }
    .recht__wand a, .recht-kasten a { hyphens: manual; }
}
.recht__wand > h3 { margin-top: var(--a-8); font-size: var(--gr-h4); line-height: 1.3; }
.recht__wand > h3:first-child { margin-top: 0; }
.recht__wand > h3 + * { margin-top: var(--a-3); }
.recht__wand > ul:not([class]) { padding-left: var(--a-5); list-style: disc; }
.recht__wand > ul:not([class]) li + li { margin-top: var(--a-2); }
.recht__wand strong { color: var(--tx); }
.recht__wand address { font-style: normal; }
.recht__wand code { font-family: var(--schrift-mono); font-size: 0.875em; color: var(--tx); overflow-wrap: anywhere; }
/* Lange Adressen (E-Mail, Links) brechen am Handy um, statt seitlich hinauszuragen */
.recht__wand a { overflow-wrap: anywhere; }

/* Hervorgehobener Absatz (Rechtsgrundlage, Anbieter, Zusagen): Lavendel-Hinweiskarte wie in
   docs/konzept/9-Projekt-BlacklightSMP.png – ohne Rahmen, Titel als Mono-Label, Text 15 px.
   Den Rahmen im Hohen Kontrast liefert --kasten-rand. */
.recht-kasten {
    padding: var(--a-6);
    background: var(--c-lavendel);
    border: var(--kasten-rand);
    border-radius: var(--r-3);
    font-size: var(--gr-text);
    line-height: 1.6;
    color: var(--tx2);
}
.recht-kasten > * + * { margin-top: var(--a-2); }
.recht-kasten > .recht-kasten__titel { display: block; }
.recht-kasten > .recht-kasten__titel + * { margin-top: var(--a-3); }
.recht-kasten ul { padding-left: var(--a-5); list-style: disc; }
.recht-kasten li + li { margin-top: var(--a-1); }

/* Karten in der Textspalte (Gewerbeberechtigungen, Rechte, gespeicherte Einträge, Maßnahmen).
   Titel 18 px wie die Zwischenüberschriften der Textwand statt 20 px wie die Systemkarten: in der
   schmalen Spalte stehen zwei Karten nebeneinander, „Datenübertragbarkeit“ muss in eine Zeile passen. */
.recht-karten { --luecke: var(--a-3); }
.recht-karten .karte { gap: var(--a-2); padding: var(--a-5); }
.recht-karten .karte--kante { padding-left: var(--a-7); }
.recht-karten .karte h3,
.recht-karten .karte .karte__titel { font-family: var(--schrift-titel); font-size: var(--gr-h4); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--tx); }
.recht-karten .karte p:not(.karte__titel) { font-size: var(--gr-text); line-height: 1.6; color: var(--tx2); }
.recht-karten .daten dd { font-size: var(--gr-text); font-weight: 400; line-height: 1.5; }
.recht-karten .daten--zeilen dt { color: var(--tx3); }
@media (min-width: 640px) {
    .recht-karten .daten--zeilen > div { grid-template-columns: 6rem 1fr; }
}

/* Gespeicherte Einträge: eine Karte je Eintrag statt einer breiten Tabelle */
.speicher { display: grid; gap: var(--a-3); }
.speicher .karte { padding: var(--a-5); }


/* Barrierefreiheit: Darstellungsschalter ------------------------------------------ */

.anzeige .karte { gap: var(--a-3); }
.anzeige .karte p { color: var(--tx2); }
.anzeige .karte .knopf { margin-top: auto; align-self: start; }
.anzeige__symbol { width: var(--a-7); height: var(--a-7); color: var(--label); }
.anzeige__ohne-js { margin-top: var(--a-6); max-width: var(--text-max); color: var(--tx2); }
/* gewählte Darstellung: gefüllt; den Zustand tragen außerdem aria-pressed und der Text „Aktiv“ */
.theme-btn[aria-pressed="true"] { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-tx); }
/* Windows-Kontrastdesigns überschreiben die Füllung: dort wie die Schalter im Kopf (main.css) */
@media (forced-colors: active) {
    .theme-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}


/* Abschluss: violetter Kasten mit E-Mail ---------------------------------------- */

.recht-cta { margin-top: var(--abschnitt-pad); }
.recht-cta .knopf { overflow-wrap: anywhere; }


/* Fehlerseiten: ein Tinte-Abschnitt, mittig in der Höhe ------------------------- */

/* füllt das Fenster bis knapp über den Fuß, auf sehr hohen Bildschirmen höchstens 46 rem */
.fehlerseite { display: flex; align-items: center; min-height: min(calc(100vh - var(--kopf-hoehe) - var(--a-20)), 46rem); }
.fehlerseite > .container { width: 100%; }
.fehler__code {
    margin-bottom: var(--a-4);
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: clamp(4.5rem, 2.5rem + 9vw, 8.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--akzent);
    font-variant-numeric: tabular-nums;
}
.fehlerseite .hero__inhalt > .lead { margin-bottom: var(--a-8); }
/* Am Handy drei gleich breite Knöpfe untereinander statt drei verschieden langer */
@media (max-width: 639px) {
    .fehlerseite .knopf-reihe > .knopf { flex: 1 1 100%; }
}
.fehlerseite .hinweis { margin-top: var(--a-6); }

/* Tinte-Abschnitt direkt über dem dunklen Fuß: eine Linie trennt beide
   (als Schatten, damit der Rahmen des Fußes im Hohen Kontrast bleibt) */
main:has(> .fl-tinte:last-child) + .fuss { box-shadow: inset 0 var(--rand-breite) 0 var(--c-tinte-rand); }


/* Druck: Übersicht und Schalter braucht auf Papier niemand; der Mail-Knopf im violetten
   Kasten bleibt als Text stehen, denn seine Beschriftung ist die Adresse --------------- */

@media print {
    .recht__inhalt, .anzeige { display: none !important; }
    .recht__wand { border-left-color: var(--h-text); }
    .recht-cta .knopf { min-height: 0; padding: 0; background: none; border: 0; color: var(--h-text); }
}