/* ══ Wellbeing Menu · Rechtsseiten ═════════════════════════════════════════════
   Keine eigene Haut. Die Seite benutzt die Slots der Edition und die Schrift des
   Menus — Artico, ein Grad, gegliedert über Luft. Canela kommt hier nicht vor:
   eine Rechtsseite ist kein Ort für die Anzeigeschrift.

   DIE EDITION GILT AUCH HIER. Die Werte unten sind die der Studio-Atha-Fassung.
   Der Build schreibt je Pfad denselben `:root`-Block, den er auch in das Menu
   schreibt (siehe `rendern.py` und `AENDERUNGEN` 6a4) — dann ist Maison Rivas
   Datenschutzseite schwarz, nicht hell. Eine helle Rechtsseite hinter einem
   dunklen Menu liest sich als anderes Haus, und genau daran merkt ein Gast,
   dass etwas angeklebt ist.

   Zum Markup: Es sind zwei Dateien, privacy.html und datenschutz.html. Verlinkt
   wird aus dem Menu auf die englische; die deutsche hängt an ihrem Fuß. Beide
   Fassungen sagen dasselbe. Wird eine geändert, die andere mit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die Rechtsseite ist ein eigenes Dokument und erbt nichts vom Menu —
   die Schriften müssen hier noch einmal deklariert werden. Zwei Schnitte
   reichen: Light für den Text, Regular für Überschriften und Labels. */
@font-face{font-family:"Artico";src:url(/wellbeing/fonts/Artico-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Artico";src:url(/wellbeing/fonts/Artico-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* Slots der Edition — der Build überschreibt sie je Pfad */
  --ground:#FCFBF3;
  --ground-2:#F5F3E9;
  --text:#1A1B12;
  --meta:#64635D;
  --line:rgba(7,28,27,.10);

  --sans:"Artico",Helvetica,Arial,sans-serif;
  --m:24px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --bar:44px;
  --lead:34px;
  color-scheme:light;
}
@media(min-width:960px){:root{--m:clamp(72px,9vw,120px);--lead:40px}}
@media(min-width:1280px){:root{--m:120px}}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;background:var(--ground)}
body{min-height:100%;background:var(--ground);color:var(--text);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
/* Links tragen die Haarlinie des Systems, nicht die Unterstreichung des Browsers. */
.u{border-bottom:1px solid var(--line);padding-bottom:.1em}
.u:hover{border-bottom-color:currentColor}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* Der Streifen ist der des Menus: gleiche Höhe, gleicher Grund, gleiches Label.
   Hier steht statt der Wortmarke der Hausname als Text — die Rechtsseite ist
   nicht die Fläche, auf der eine Marke auftritt. */
.bar{position:fixed;left:0;right:0;top:0;z-index:12;
  height:calc(var(--bar) + var(--sat));padding:var(--sat) var(--m) 0;
  background:var(--ground-2);
  display:flex;align-items:center;justify-content:space-between}
.lab{font-weight:400;font-size:12px;line-height:1.3;letter-spacing:.04em;
  text-transform:uppercase;color:var(--meta)}

/* ══ Die Textfläche ════════════════════════════════════════════════════════════
   Bis zum 22.10. stand hier `max-width:34em` zusammen mit den Außenstegen in
   DERSELBEN Box — `box-sizing:border-box` zieht das Padding von der Breite ab, und
   von 578 px Spalte blieben am Desktop 338 px übrig. Die Seite las sich gequetscht,
   obwohl die Zahl im CSS richtig aussah. Das Maß gehört an den Text, die Stege an
   den Rahmen.

   Gegliedert wird am Desktop über eine Rubrik links — dasselbe Device wie die
   Spec-Zeilen im Session-Raum, also nichts neu Erfundenes. Am Handy fällt die
   Rubrikenspalte weg und mit ihr die Haarlinien: dort gliedert
   VERSALIE · TEXT · LUFT, sonst zerfällt eine schmale Spalte in Streifen. */
.legal{padding:calc(var(--bar) + var(--sat) + var(--lead) * 1.4) var(--m)
        calc(var(--lead) * 3 + var(--sab))}
.legal h1{font-weight:400;font-size:12px;line-height:1.3;letter-spacing:.04em;
  text-transform:uppercase;color:var(--meta);margin-bottom:calc(var(--lead) * 1.2)}
.legal .lead{font-size:20px;line-height:1.5;max-width:30em;
  margin-bottom:calc(var(--lead) * 1.6)}
.legal .blk h2{font-weight:400;font-size:12px;line-height:1.6;letter-spacing:.04em;
  text-transform:uppercase;color:var(--meta)}
.legal .blk div{max-width:34em}
.legal p + p{margin-top:.85em}

/* Handy: keine Linien, keine zweite Spalte. */
.legal .blk{margin-top:calc(var(--lead) * 1.3)}
.legal .blk h2{margin-bottom:calc(var(--lead) * .35)}

@media(min-width:960px){
  .legal{max-width:calc(200px + 56px + 34em + 2 * var(--m))}
  .legal .blk{display:grid;grid-template-columns:200px minmax(0,34em);gap:0 56px;
    margin-top:0;border-top:1px solid var(--line);padding:22px 0 30px}
  .legal .blk h2{grid-column:1;margin-bottom:0}
  .legal .blk div{grid-column:2}
}

.legal .stand{margin-top:calc(var(--lead) * 1.5);color:var(--meta)}
/* Rückweg und Sprachwechsel stehen im Typosystem, nicht als unterstrichener Fließtext:
   Versalien auf Meta-Grau, wie jedes Label im Haus. */
.legal .foot{margin-top:calc(var(--lead) * 1.8);display:flex;gap:1.1em 2.2em;flex-wrap:wrap;
  align-items:baseline}
.legal .foot a{font-weight:400;font-size:12px;line-height:1.3;letter-spacing:.04em;
  text-transform:uppercase;color:var(--meta);border:0;padding:0}
.legal .foot a:hover{color:var(--text)}
@media(min-width:960px){
  .legal .foot{border-top:1px solid var(--line);padding-top:22px}
  .legal .foot .stand{margin:0 0 0 auto}
}