/* ============================================================
   ELETINKER · ELEDO — Rechtsseiten auf do.eletinker.com
   Gemeinsame Stile fuer impressum, datenschutz, cookies und
   haftungsausschluss.

   Aufbau 1:1 wie die Rechtsseiten von www.eletinker.com:
   Kopfzeile, Pfadangabe, Titel mit Unterzeile, darunter EINE
   Karte ueber die volle Breite mit dem Fliesstext. Grundgeruest
   und Typo-Tokens kommen aus brand/tokens.css und css/app.css;
   hier steht nur, was eine Rechtsseite zusaetzlich braucht.
   ============================================================ */

/* Kopfzeile ohne Navigation: auf diesem Host gibt es nur die vier
   Rechtsseiten, jeder Menuepunkt waere ein toter Link. */
.site-header { justify-content: flex-start; }

/* Umschalter hell/dunkel, rechts aussen wie auf www.eletinker.com. Masse und
   Farben aus den Navbar-Tokens, damit er zur Leiste gehoert und in beiden
   Themes stimmt. Mond bei heller, Sonne bei dunkler Ansicht. */
.theme-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  color: var(--nav-fg); background: var(--nav-control-bg);
  border: var(--bw-hair) solid var(--nav-control-border);
  border-radius: var(--radius-3); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.theme-btn:hover { background: var(--nav-control-bg-hover); color: var(--nav-fg-hover); }
.theme-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-btn svg { width: 18px; height: 18px; display: block; }
.theme-btn .ico-sonne { display: none; }
html.theme-dark .theme-btn .ico-mond { display: none; }
html.theme-dark .theme-btn .ico-sonne { display: block; }

/* Seiten ohne Pfadangabe haetten den Titel sonst direkt an der Kopfzeile
   kleben: den Abstand liefert sonst die Brotkrumen-Leiste. Der Hero der
   Startseite bringt seinen eigenen mit, deshalb nur .wrap direkt am Header. */
.site-header + .wrap { padding-top: var(--space-6); }

/* Fliesstext der Startseite steht nicht in einer Karte, sondern direkt im
   Abschnitt. .recht setzt nur Typografie, das passt hier genauso. Ohne
   Breitenbegrenzung: der Inhalt laeuft ueber die volle Seite, wie in den
   Karten der uebrigen Seiten auch. */

/* .set-card ist eine Flex-Spalte mit fester Luecke zwischen den Kindern.
   Fuer Fliesstext ist das falsch: Ueberschrift und zugehoeriger Absatz
   stuenden gleich weit auseinander wie zwei Kapitel. Rahmen, Flaeche und
   Innenabstand der Karte bleiben, nur der Textfluss wird normal. */
.recht { display: block; }

/* Schriftgroessen exakt wie .legal-content auf www.eletinker.com. */
.recht h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -0.01em; color: var(--ink-900); margin: 2rem 0 0.6rem;
}
.recht h2:first-child { margin-top: 0; }
.recht h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--ink-900); margin: 1.4rem 0 0.5rem;
}
/* Mehrzeilige Ueberschriften kleben sonst aufeinander (mobil der Regelfall). */
.recht h2, .recht h3 { line-height: 1.35; }
.recht p, .recht ul { font-size: 0.94rem; line-height: 1.7; color: var(--text); }
.recht p { margin: 0 0 0.9rem; }
.recht ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.recht li { margin-bottom: 0.35rem; }
.recht a { color: var(--primary); }
/* Gleicher Abstand nach unten wie ein Absatz, sonst klebt die E-Mail-Zeile
   an der Anschrift. */
.recht address { font-style: normal; margin: 0 0 0.9rem; }

.recht .stand {
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}

/* Zusammenfassung ganz oben, einziger abgesetzter Block im Text. */
.recht .kasten {
  padding: 1rem 1.25rem; margin: 0 0 1.75rem;
  background: var(--bg-surface-hover);
  border: var(--bw-hair) solid var(--ink-200);
  border-radius: 0.5rem;
}
.recht .kasten p:last-child { margin-bottom: 0; }
.recht .kasten + h2 { margin-top: 0; }

/* Fusszeilen-Links mit Mittelpunkt dazwischen, wie auf www.eletinker.com.
   .footer-nav bringt Schrift und Farben aus app.css mit, hier nur der
   engere Abstand und der Trenner. */
.footer-nav { gap: 0.5rem 1.25rem; }
.footer-nav .sep { color: rgba(255,255,255,0.35); }

@media (max-width: 768px) {
  /* navbar.md §8 blendet die Wortmarke mobil aus, weil dort Hamburger und
     Nutzer-Pille den Platz brauchen. Diese Leiste hat beides nicht; ein
     einzelnes Logo ohne Namen saehe nach halb geladener Seite aus. */
  .brandmark span { display: inline; }
  .recht h2 { font-size: 1rem; margin-top: 1.6rem; }
  .recht .kasten { padding: 0.9rem 1rem; margin-bottom: 1.4rem; }
}