/* Impressum und Datenschutzerklärung — die beiden öffentlichen Pflichtseiten.
 *
 * Eine gemeinsame Datei statt zweier `<style>`-Blöcke: Zwei Kopien desselben
 * Blocks weichen beim fünften Absatz voneinander ab. Genau dafür gibt es
 * `forms.css` schon als Beispiel.
 *
 * Nur semantische Tokens. Kein eigener Farbwert.
 *
 * Diese Seiten sind ohne Anmeldung erreichbar und müssen es sein: § 5 DDG
 * verlangt „leicht erkennbar, unmittelbar erreichbar und ständig verfügbar".
 * Eine Pflichtangabe hinter einer Anmeldung ist keine. Deshalb tragen sie
 * auch nicht die Anwendungsschale (`.app`, Seitenleiste, Sitzung), sondern
 * stehen für sich. */

body.recht{
  background:var(--surface-gray);
  color:var(--ink);
  font-family:var(--font);
  margin:0;
  /* `min-height:100dvh` und nicht `100vh`: Auf dem Telefon wandert die
     Adressleiste, und `vh` rechnet mit dem grössten Zustand — der Fuss
     stünde dann unter dem Bildrand. */
  min-height:100dvh;
}

.recht-band{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.recht-band .innen{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.recht-band a.zurueck{
  margin-left:auto;font-size:14px;font-weight:600;color:var(--primary-ink);
  text-decoration:none;
  /* 44px Tastfläche (--touch aus dem Leitfaden), ohne das Band zu dehnen:
     Die Polsterung liegt innen, der Ausgleich aussen. */
  padding:12px 4px;
}
.recht-band a.zurueck:hover{text-decoration:underline}
.recht-band img{height:30px;width:auto;display:block}

.innen{max-width:780px;margin:0 auto;padding:0 20px}

main.recht{padding:32px 0 64px}

.recht h1{
  font-family:var(--font-display);font-size:30px;line-height:1.2;
  margin:0 0 6px;font-weight:600;
}
.recht .stand{color:var(--ink-3);font-size:13px;margin:0 0 30px}

.recht h2{
  font-size:18px;line-height:1.35;margin:34px 0 10px;font-weight:600;
  padding-top:18px;border-top:1px solid var(--line);
}
.recht h2:first-of-type{border-top:none;padding-top:0}
.recht h3{font-size:15px;margin:20px 0 6px;font-weight:600}

.recht p,.recht li{font-size:15px;line-height:1.65}
.recht p{margin:0 0 12px}
.recht ul{margin:0 0 12px;padding-left:20px}
.recht li{margin-bottom:6px}
.recht a{color:var(--primary-ink)}

/* Eine Angabe mit Bezeichner — für die Pflichtangaben nach § 5 DDG. Auf
   schmalen Schirmen untereinander, sonst zweispaltig. Dieselbe Bauart wie
   `.kv` im Portal; hier eigenständig, weil diese Seiten `portal.css` nicht
   laden (sie gehören zu keiner der beiden Schalen). */
.angaben{display:grid;grid-template-columns:210px 1fr;gap:8px 18px;
         font-size:15px;margin:0 0 16px}
.angaben dt{color:var(--ink-3);font-size:13px;line-height:1.6}
.angaben dd{margin:0}
@media (max-width:640px){
  .angaben{grid-template-columns:1fr;gap:2px 0}
  .angaben dd{margin-bottom:12px}
}


footer.recht-fuss{
  border-top:1px solid var(--line);margin-top:40px;padding:20px 0 40px;
  color:var(--ink-3);font-size:13px;
}
footer.recht-fuss a{color:var(--ink-3)}
footer.recht-fuss nav{display:flex;gap:18px;flex-wrap:wrap}

/* Die beiden Internetseiten (Vorgabe des Geschaeftsfuehrers, 23.10.2026;
   Rechtspruefung 26.3): je das offizielle Logo (ADR-0019) als Link, in einem
   neuen Tab -- wer sie ansieht, verliert weder Eingaben noch Link.
   Gleich hoch und auf einer Mittellinie (Wunsch des Nutzers, 23.10.2026):
   `--logo-h` ist die Hoehe des sichtbaren Logos. Die Datei von VetExperts
   hat oben 6 und unten 5 von 168 px Rand (Inhalt 157 px), die von
   VetIntelligence keinen -- deshalb ist das Bild von VetExperts um
   168/157 hoeher.
   Kleiner und ruhiger seit dem 23.10.2026 nachmittags (Wunsch des
   Geschaeftsfuehrers: „ein bisschen kleiner und eleganter"): 24 statt 28 px
   in der Karte, 22 px im Fuss. */
.webseiten{--logo-h:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:16px 0 0}
.webseiten a{display:inline-flex;align-items:center;border-radius:6px}
.webseiten img{display:block;width:auto;height:var(--logo-h)}
.webseiten .ve img{height:calc(var(--logo-h) * 168 / 157)}
/* Im Fuss liegt die Zeile auf grauem Grund; das Logo von vetexperts.de hat
   einen halbdeckenden weissen Grund und zeichnete sich dort als Kasten ab.
   Bis zum 23.10.2026 stand deshalb eine weisse Platte mit Rahmen unter
   beiden -- dem Geschaeftsfuehrer zu schwer. `multiply` rechnet das Weiss
   in den Grund ein, die Datei bleibt unveraendert (HERKUNFT.md); auf Weiss
   aendert es nichts. Keine dieser Seiten hat einen dunklen Modus -- kaeme
   einer, verschwaenden die Logos dort und brauchten wieder eine Platte.
   `p.webseiten`: Auf der Datenschutzinformation (body.recht) nahm `.recht p`
   den Abstand nach oben weg -- die Platte hatte das verdeckt. */
footer p.webseiten{--logo-h:22px;margin:16px 0 0}
footer .webseiten img{mix-blend-mode:multiply}

/* Das Demo-Zeichen im Band (Spec 2026-11-02): nur auf demo.*-Hosts
   (demo.vetexperts.de) sichtbar, gesetzt von assets/demo-modus.js. Wer dort
   Beispieldaten sieht, soll nicht glauben, es seien echte Personen. Ohne das
   Zeichen bleibt das Element verborgen und nimmt keinen Platz -- auf
   bewerbung.vetexperts.de aendert sich nichts. Gleiche Gestalt wie auf der
   VetRadar-Anmeldung (login.html), Sand-Token. */
.demo-marke{display:flex;align-items:center;gap:10px;margin:10px 0 0;
            font-size:12px;line-height:18px;color:var(--ink-2)}
.demo-marke[hidden]{display:none}
.demo-pille{flex:none;padding:2px 10px;border-radius:var(--radius-pill);
            background:var(--pastel-sand);color:var(--pastel-sand-ink);
            font-size:11px;line-height:16px;font-weight:600;
            letter-spacing:.06em;text-transform:uppercase}