/* Gemeinsames Styling für die Rechts-/Info-Seiten (Datenschutz, AVV, AGB, Impressum) */
:root{
  /* Rufon-Marke: Navy mit Gold. Hier stand bis zum 22.07.2026 das alte Farbschema
     (Blau -> Lila). Die Rechtsseiten sind oeffentlich erreichbar und aus dem
     Anmeldebildschirm verlinkt — ausgerechnet dort trug das Produkt die Farben des
     Schwesterprodukts. `html.call` greift auf diesen Seiten nicht, daher direkt. */
  --accent:#051C2C; --accent2:#C8A44D; --gold-text:#8a6d22;
  /* --text3 #626c7b statt #6b7584 (04.10.2026, Apple-Durchsicht M13): die Zeile „Der
     Power-Dialer" unter dem Logo (13 px auf --bg) war GEMALT 4,38:1, verlangt sind 4,5.
     Gerechnet jetzt 5,0:1. Der Dunkelmodus hat seine eigene Variable und bleibt. */
  --bg:#f6f8fb; --card:#ffffff; --text:#0B1520; --text2:#4a5563; --text3:#626c7b;
  --border:#e6e9ed; --warn-bg:#fff7ed; --warn-border:#fed7aa; --warn-text:#9a3412;
  --radius:18px;
}
/* NEU GESETZT am 23.09.2026 — und zwar NUR hier, nicht im HTML.
   Der Einkaeufer-Pruefer: „die Rechtsseiten sehen aus wie ein anderes, aelteres Projekt"
   (Systemschrift, ein Telefon-Emoji als Logo, kein Bezug zur Seite, von der man kommt).
   Ein Einkaeufer oeffnet das Impressum ZUERST. Geaendert wird trotzdem nur diese Datei:
   `tenant_consents` speichert die Pruefsumme der HTML-Datei von AGB, AVV und
   Datenschutz (core.js, dokumentPruefsumme), und am 16.09. hat ein Kunde zugestimmt.
   Eine Stilvorlage geht in die Pruefsumme nicht ein — ein neuer Rahmen im HTML schon.
   Kopfleiste und Rueckweg im HTML kommen mit der naechsten Vertragsrunde (AGB 5.1). */
@font-face{
  font-family:'Inter var';
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter var', system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv05' 1,'ss03' 1;
}
.legal-wrap{max-width:820px; margin:0 auto; padding:28px 20px 88px}
.legal-head{display:flex; align-items:center; gap:12px; margin:0 0 28px; padding:0 0 22px;
  border-bottom:1px solid var(--border); color:inherit; text-decoration:none}
/* Das Emoji traegt keine Marke — an seiner Stelle steht das App-Symbol. */
.legal-head .icon{
  width:40px; height:40px; border-radius:11px; flex:0 0 auto; font-size:0; color:transparent;
  background:#fff url('../ca-icon.svg') center/26px no-repeat; border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(5,28,44,.06);
}
.legal-head h1{font-size:18px; margin:0; font-weight:800; letter-spacing:-.01em; color:var(--accent); line-height:1.2}
.legal-head p{margin:2px 0 0; font-size:13px; color:var(--text3)}
.legal-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:48px 52px; box-shadow:0 1px 2px rgba(5,28,44,.04), 0 18px 44px rgba(5,28,44,.06);
}
.legal-card h2{font-size:32px; line-height:1.15; margin:0 0 10px; font-weight:800; letter-spacing:-.02em; color:var(--accent)}
.legal-card h3{font-size:18px; line-height:1.3; margin:36px 0 8px; font-weight:700; letter-spacing:-.01em; color:var(--accent)}
.legal-card h4{font-size:12px; margin:22px 0 4px; color:var(--text2); text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.legal-card p, .legal-card li{color:var(--text2)}
.legal-card p{max-width:40em}
.legal-card li{margin:4px 0}
.legal-card strong, .legal-card b{color:var(--text)}
.legal-card a{color:var(--accent); text-decoration:underline; text-decoration-color:rgba(200,164,77,.6); text-underline-offset:3px}
.legal-card a:hover{text-decoration-color:var(--accent2)}
.legal-card code{background:var(--bg); padding:1px 6px; border-radius:5px; font-size:.9em; color:var(--gold-text)}
.stand{font-size:13px; color:var(--text3); margin-top:40px; border-top:1px solid var(--border); padding-top:18px}
.note{
  background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn-text);
  border-radius:12px; padding:12px 16px; font-size:14px; margin:0 0 24px;
}
table{border-collapse:collapse; width:100%; margin:14px 0; font-size:14px}
th,td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top}
/* Lange Woerter brechen in der Zelle (04.10.2026, Apple-Durchsicht M3). Die Tabelle der
   Datenschutzerklaerung (Dienste, Zweck, Anbieter) schob die Seite am Handy auf 427 px —
   „Reichweitenmessung", „Conversion-Messung" passen in eine Drittel-Spalte nicht, und eine
   Tabelle wird nie schmaler als ihr laengstes Wort. Die Seite liess sich beim Lesen seitlich
   verschieben. Erst Silbentrennung (lang="de" steht im Dokument), wo es die nicht gibt, bricht
   das Wort an beliebiger Stelle — beides nur, wo es sonst ueber den Rand ginge. Nur am
   schmalen Fenster: am PC passt die Tabelle, und die Spaltenbreiten bleiben dort, wie sie waren
   (eine Tabelle verteilt die Breite nach den kleinsten Inhalten — die aendert diese Regel).
   NUR hier und nicht im HTML: die Zustimmung speichert die Pruefsumme der HTML-Datei (Kopf
   dieser Datei), eine Stilvorlage geht nicht ein.
   NUR DIE DREISPALTIGE TABELLE (07.10.2026, im Bild gesehen): die erste Fassung brach in JEDER
   Zelle — und weil eine Tabelle die Breite nach dem laengsten Inhalt verteilt, blieb fuer die
   erste Spalte fast nichts: „Die|nst", „Goo|gl|e". Dieselbe Regel haette die zweispaltigen
   Tabellen (AVV, Unterauftragsverarbeiter: „Anschrift" | langer Text) ebenso zerdrueckt, die
   vorher passten. `:first-child:nth-last-child(3)` trifft die erste Zelle einer Zeile mit genau
   drei Zellen — eine Klasse am HTML gibt es nicht und darf es nicht geben. Die erste Spalte
   bekommt ein festes Drittel, dann bricht nur noch, was in sein Drittel nicht passt. */
@media (max-width:640px){
  th:first-child:nth-last-child(3), td:first-child:nth-last-child(3){width:32%}
  th:first-child:nth-last-child(3), th:first-child:nth-last-child(3) ~ th,
  td:first-child:nth-last-child(3), td:first-child:nth-last-child(3) ~ td{
    padding:9px 8px; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere}
  /* Zweispaltige Tabellen (AVV, Unterauftragsverarbeiter): nur die ZWEITE Zelle bricht. Beim
     Nachmessen gefunden (07.10.2026): bei 320 px ragten sie bis 321 bzw. 332 px, die
     Unterauftragsverarbeiter vorher sogar bis 411 px. Die erste Spalte (Beschriftung) behaelt
     ihr laengstes Wort und wird nicht zerdrueckt. */
  tr > :first-child:nth-last-child(2) ~ *{-webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere}
  /* Dasselbe fuer die grossen Ueberschriften — beim Nachmessen gefunden (04.10.2026): bei 320 px
     ragte in den AGB „Allgemeine Geschäftsbedingungen" (26 px) bis 330 px, die Seite wackelte wie
     die Datenschutz-Tabelle. break-word statt anywhere: eine Ueberschrift bricht nur, wenn das Wort
     sonst nicht passt. */
  .legal-card h2,.legal-card h3{-webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word}
}
th{background:var(--bg); font-weight:700; color:var(--text)}
.back{display:inline-flex; align-items:center; gap:6px; margin-top:28px; padding:10px 16px; font-size:14px; font-weight:600;
  border:1px solid var(--border); border-radius:10px; text-decoration:none !important; color:var(--accent)}
.back:hover{border-color:var(--accent2)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
@media (max-width:640px){
  .legal-wrap{padding:18px 14px 64px}
  .legal-card{padding:28px 20px} .legal-card h2{font-size:26px}
}
@media (prefers-color-scheme:dark){
  :root{--bg:#06131d;--card:#0b1d2a;--text:#eef2f6;--text2:#b9c3cf;--text3:#8593a3;--border:#1c3142;
    --warn-bg:#2a1f12;--warn-border:#5a3d1e;--warn-text:#fbbf8a;--accent:#eef2f6;--gold-text:#e4c878}
  .legal-head .icon{background-color:#fff; border-color:transparent}
  .legal-card{box-shadow:none}
  .legal-card a{text-decoration-color:rgba(228,200,120,.6)}
}
/* „Kontrast erhoehen" (04.10.2026, Apple-Durchsicht M10; iOS: Bedienungshilfen > Anzeige &
   Textgroesse, im Browser prefers-contrast: more). Bis heute aenderte die Einstellung nichts.
   Nebenschrift in der Farbe des Fliesstexts, hell wie dunkel: der Block steht NACH dem
   Dunkelmodus, und var(--text) loest dort zur dunklen Textfarbe auf. Nur Stil — die Pruefsumme
   der Zustimmung haengt am HTML (Kopf dieser Datei). */
@media (prefers-contrast: more){
  :root{--text2:var(--text); --text3:var(--text)}
}