/* Rechtsseiten -- statisch, damit sie auch dann stehen, wenn die App nicht
   laedt. "Staendig verfuegbar" ist eine Anforderung, keine Absichtserklaerung.

   SIE GEHOEREN ZUR SEITE, NICHT ZUR APP (19.09.2026).

   Bis heute trugen sie die dunkle App-Welt (Navy #0E1621), weil sie von dort
   herkamen. Seit der Startseite unter /start werden sie aus einer hellen Seite
   heraus verlinkt -- und dann ist der dunkle Grund kein Stilbruch am Rand,
   sondern die ganze Flaeche. Auf dem Telefon faellt das auf, am Schreibtisch
   kaum: dort ist es ein Fenster in heller Umgebung, auf dem Telefon der ganze
   Bildschirm, und ohne `theme-color` faerben Safari und Chrome auch noch ihre
   Leisten danach ein. Deshalb jetzt Papier und Tinte wie die Seite.

   FARBEN NICHT HIER ERFINDEN. Massgeblich ist vend-one-start/FARBEN.md, die
   gleichen Rollen fuehrt web/start/stil.css. Diese Datei haelt eine eigene
   Kopie, weil die Rechtsseiten ohne jede andere Datei stehen muessen --
   dafuer muss sie bei einer Markenaenderung von Hand mitziehen. Die Werte
   unten sind genau die Rollen aus stil.css, nicht neu gemischt. */

/* Dieselbe Schrift wie die Seite, aus demselben Ordner (siehe stil.css). */
@font-face { font-family: "Archivo"; src: url("/start/schrift/Archivo.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Ersatz"; src: local("Arial"); font-weight: 100 500; size-adjust: 99%; ascent-override: 88.7%; descent-override: 21.2%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Ersatz"; src: local("Arial Bold"); font-weight: 600 900; size-adjust: 100%; ascent-override: 87.8%; descent-override: 21%; line-gap-override: 0%; }

:root {
  color-scheme: light dark;

  --schrift: "Archivo", "Archivo Ersatz", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --papier: #FFF7EC;
  --flaeche: #FFFDF8;
  --rand: #EADCC8;
  --tinte: #0E1621;
  --gedaempft: #4B5566;

  /* Marke Rosa. Auf Papier traegt NICHT die Marke selbst den Text (Stufe 500
     waeren 2,8:1), sondern Stufe 700 mit 5,9:1. Stufe 500 bleibt den Flaechen
     vorbehalten, mit Tinte darauf. */
  --akzent: #FA52C1;        /* Stufe 500 -- Flaechen, Text darauf ist Tinte */
  --akzent-text: #0E1621;
  --akzent-tief: #B60887;   /* Stufe 700 -- Links, Fokus (5,9:1 auf Papier) */
  --akzent-hell: #FFE2F1;   /* Stufe 100 -- getoente Kaesten, Tinte darauf 15:1 */
  --akzent-rand: #FFC3E5;   /* Stufe 200 -- Auswahl und Raender in Toenungen */
}

/* ------------------------------------------------- Die Dunkelfassung
   Dieselben Rollen mit den Werten der App-Welt (Navy). Erst das Geraet, dann
   die Wahl: wer auf der Startseite ausdruecklich hell gewaehlt hat, bekommt
   hier kein Dunkel -- die Wahl steht in `localStorage` und wird vom Skript im
   Kopf der Seite als `data-thema` gesetzt.

   Akzentschrift nimmt im Dunkeln Stufe 400 (7,3:1 auf Navy); Stufe 700 haette
   dort 2,2:1. Die Marke selbst bleibt Stufe 500 -- als Flaeche, mit Tinte. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --papier: #0E1621;
    --flaeche: #16202C;
    --rand: #26323F;
    --tinte: #E8EDF3;
    --gedaempft: #93A2B4;
    --akzent-tief: #FF70CB;
    --akzent-hell: #2A1329;
    --akzent-rand: #4A2043;
  }
}
:root[data-thema="dunkel"] {
  --papier: #0E1621;
  --flaeche: #16202C;
  --rand: #26323F;
  --tinte: #E8EDF3;
  --gedaempft: #93A2B4;
  --akzent-tief: #FF70CB;
  --akzent-hell: #2A1329;
  --akzent-rand: #4A2043;
}
/* Die Wahl gilt auch fuer Rollbalken und Formteile des Browsers, nicht nur das Geraet. */
:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] { color-scheme: dark; }

/* Der Schalter, wie auf der Startseite: ein Zeichen, kein Menue. */
.thema-schalter {
  float: right; width: 44px; height: 44px; margin: -10px -10px 0 0;
  display: inline-grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--gedaempft); font-size: 1.15rem; line-height: 1; border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .thema-schalter:hover { color: var(--tinte); background: var(--flaeche); } }
.thema-schalter svg { display: block; }
.thema-schalter svg[hidden] { display: none; }
.thema-schalter:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 2px; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--akzent-rand); color: var(--tinte); }
.blatt { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.marke {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gedaempft); margin-bottom: 0.5rem; font-weight: 700; text-decoration: none;
}
.marke:hover { color: var(--tinte); }
/* Ueberschriften im Schnitt der Seite (fett, eng), aber nicht in ihrer
   Groesse: die Startseite darf mit 4 rem auftreten, ein Impressum nicht. */
h1 { font-size: 2.1rem; line-height: 1.1; margin: 0 0 1.75rem; font-weight: 800; letter-spacing: -0.025em; }
h2 {
  font-size: 1.15rem; margin: 2.5rem 0 0.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rand); font-weight: 800; letter-spacing: -0.015em;
}
h3 { font-size: 0.98rem; margin: 1.5rem 0 0.4rem; color: var(--gedaempft); font-weight: 700; }
p, li { margin: 0 0 0.9rem; }
ul { padding-left: 1.2rem; }
address { font-style: normal; line-height: 1.75; }
a { color: var(--akzent-tief); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; border-radius: 4px; }
.leise { color: var(--gedaempft); font-size: 0.9rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; margin-bottom: 1rem; }
td, th { text-align: left; vertical-align: top; padding: 0.6rem 0; border-bottom: 1px solid var(--rand); }
th { color: var(--gedaempft); font-weight: 600; width: 34%; }
.fuss {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rand);
  font-size: 0.85rem; color: var(--gedaempft);
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
/* OFFENE ANGABE. Sichtbar markiert, damit nichts unausgefuellt online geht --
   ein Platzhalter, den man uebersieht, ist schlimmer als eine Luecke. Steht
   derzeit nirgends; bleibt fuer den naechsten offenen Punkt. */
.offen {
  background: var(--akzent-hell);
  border: 1px dashed var(--akzent-tief);
  color: var(--akzent-tief);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-weight: 700;
  white-space: nowrap;
}
.hinweis {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 3px solid var(--akzent-tief);
  padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.92rem;
}

/* HERVORGEHOBENER RECHTSHINWEIS -- nicht dasselbe wie `.hinweis` (fuer offene
   Punkte vor der Veroeffentlichung). Dieser Kasten ist Teil des
   veroeffentlichten Textes und bleibt stehen: Art. 21 Abs. 4 DSGVO verlangt
   fuer das Widerspruchsrecht einen Hinweis "getrennt von allen anderen
   Informationen". Getrennt heisst sichtbar getrennt, nicht nur im Quelltext.
   Getoente Flaeche statt weisser: auf Papier traegt erst die Toenung den
   Kasten sichtbar ab. */
.wichtig {
  background: var(--akzent-hell);
  border: 1px solid var(--akzent-rand);
  border-left: 3px solid var(--akzent-tief);
  border-radius: 6px;
  padding: 1.25rem 1.5rem 0.5rem;
  margin: 1.75rem 0;
}
.wichtig h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--tinte);
}
.wichtig p:last-child { margin-bottom: 0.9rem; }

/* TABELLEN DER RECHTSSEITEN -- Bezeichner und Angabe duerfen nicht aneinander
   kleben. Gemessen am 19.09.2026 bei 375 px: "Registernummer" fuellte die
   34-%-Spalte auf das Pixel genau aus, die Luecke zur Angabe daneben war
   0 px -- "HRA 713267" begann unmittelbar hinter dem "r". § 5 DDG verlangt
   Pflichtangaben "leicht erkennbar"; zwei Woerter ohne Fuge sind das nicht.

   Zwei Eingriffe: rechter Innenrand fuer alle Breiten, und unter 480 px steht
   der Bezeichner ueber der Angabe statt daneben. Die 34-%-Spalte reicht auf
   einem Telefon fuer kein laengeres Wort -- Untereinander ist dort die einzige
   Anordnung, die ohne Abkuerzungen auskommt. */
th { padding-right: 1rem; }

@media (max-width: 480px) {
  table, tbody, tr, th, td { display: block; width: auto; }
  tr { border-bottom: 1px solid var(--rand); padding: 0.6rem 0; }
  tr:last-child { border-bottom: none; }
  th, td { border-bottom: none; padding: 0; }
  th { margin-bottom: 0.15rem; }
}