/* ============================================================
   ELETINKER · ELEBON — Rechtsseiten auf bon.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; }

/* Sprachumschalter, links neben dem Hell/Dunkel-Knopf. Segmentiert nach dem
   Tab-Bar-Standard, aber in Navbar-Masse: zwei Kuerzel, das aktive gefuellt.
   Bewusst kein Ausklappmenue, bei zwei Sprachen waere das ein Klick zu viel. */
.lang-switch {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px;
  background: var(--nav-control-bg);
  border: var(--bw-hair) solid var(--nav-control-border);
  border-radius: var(--radius-3);
}
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 30px; padding: 0 0.45rem;
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--nav-fg); border-radius: calc(var(--radius-3) - 2px);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lang-switch a:hover { color: var(--nav-fg-hover); }
/* Die aktive Sprache ist ein span, kein Link: ein Verweis auf die Seite, auf
   der man schon steht, ist fuer Tastatur und Screenreader nur Rauschen. */
.lang-switch span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 30px; padding: 0 0.45rem;
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bg); background: var(--nav-fg);
  border-radius: calc(var(--radius-3) - 2px);
}
.lang-switch a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 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. Der Abstand nach
   links kommt jetzt vom Sprachumschalter, deshalb hier nur noch eine Luecke. */
.theme-btn {
  margin-left: 0.5rem;
  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; }
}

/* ---------- Fehlerseite 404 --------------------------------------------
   Muster von lab.eletinker.dev (app/not-found.tsx): Mono-Eyebrow, grosse
   Archivo-Ueberschrift, ruhiger Untertext, ein Primaerknopf zurueck zur
   Startseite. Alle Werte ueber Tokens, damit die Seite im dunklen Modus
   mitgeht. */
.fehlerseite {
  text-align: center;
  padding: 6rem 0 8rem;
}
.fehlerseite .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.fehlerseite h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
  margin: 0 0 0.75rem;
}
.fehlerseite .unterzeile {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0 0 2rem;
}
/* Knopf wie .tool-btn-primary im Lab: gefuellt, beim Hovern kein Farbwechsel,
   sondern ein harter Versatz nach unten. */
.fehlerseite .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--brand-500);
  border-radius: 4px;
  background: var(--brand-500);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.2s;
}
.fehlerseite .knopf:hover {
  border-color: var(--ink-900);
  box-shadow: 0 3px 0 0 var(--ink-900);
}
.fehlerseite .knopf:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 var(--ink-900);
}