/* ============ RECHTLICHES DES ANBIETERS ============
   AGB, Datenschutz, Impressum und Verarbeitungsverzeichnis von MyLifeBase (js/60-anbieter.js): die Zeile unten auf dem
   Anmeldebildschirm, die eigene Seite, die ein Tipp darauf oeffnet, und das Haekchen bei der Registrierung. Nur Farben aus
   den Designs (var(--…)); liegt ganz zuletzt. */

/* Die Zeile: vier Woerter nebeneinander, ein feiner Punkt dazwischen. Wird es eng, bricht sie um statt zu rollen. */
.rs-leiste{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:0;
  width:calc(100% + 24px);margin:16px -12px 0;}
.rs-link{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:4px 6px;
  border:none;background:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink-soft);
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);}
.rs-link + .rs-link::before{content:'';position:absolute;left:-1.5px;top:50%;width:3px;height:3px;margin-top:-1.5px;
  border-radius:50%;background:var(--ink-soft);opacity:.5;}
.rs-link:active{color:var(--ink);transition-duration:.06s;}
.rs-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:6px;}
@media (hover:hover) and (pointer:fine){ .rs-link:hover{color:var(--ink);text-decoration-color:currentColor;} }
@media (max-width:360px){ .rs-link{padding-inline:4px;font-size:11px;} }
@media (max-width:340px){ .rs-link{padding-inline:3px;} }
@media (max-height:680px){ .rs-leiste{margin-top:8px;} }

/* Die eigene Seite: ueber allem, mit Kopf (Zurueck, Titel) und den vier Texten als Reiter. */
html:has(.rs-seite){overflow:hidden;}
.rs-seite{position:fixed;inset:0;z-index:1600;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;background:var(--ground);color:var(--ink);text-align:left;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  animation:rsRein var(--dur-ruhig, .34s) var(--ease, ease) both;}
.rs-seite.geht{animation:rsRaus .2s var(--ease, ease) both;pointer-events:none;}
@keyframes rsRein{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}}
@keyframes rsRaus{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(28px);}}
@media (prefers-reduced-motion:reduce){ .rs-seite,.rs-seite.geht{animation:none;} }
.rs-kopf{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background:var(--ground);border-bottom:1px solid var(--line);}
.rs-zurueck{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:7px 13px 7px 9px;
  border:1px solid var(--line);border-radius:var(--r-feld, 10px);background:var(--surface);cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), border-color var(--dur) var(--ease);}
.rs-zurueck svg{width:17px;height:17px;}
.rs-zurueck:active{transform:scale(.96);transition-duration:.06s;}
@media (hover:hover) and (pointer:fine){ .rs-zurueck:hover{border-color:var(--accent);} }
.rs-titel{flex:1;min-width:0;margin:0;font-size:17px;font-weight:650;letter-spacing:-.012em;line-height:1.25;
  overflow-wrap:break-word;hyphens:auto;}
.rs-reiter{display:flex;flex-wrap:wrap;gap:6px;max-width:760px;margin:0 auto;padding:12px 16px 0;}
.rs-reiter-k{min-height:34px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-feld, 10px);
  background:var(--surface);cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.rs-reiter-k.on{background:var(--ink);border-color:var(--ink);color:var(--ground);}
@media (hover:hover) and (pointer:fine){ .rs-reiter-k:not(.on):hover{border-color:var(--accent);color:var(--ink);} }
.rs-inhalt{max-width:760px;margin:0 auto;padding:12px 16px 28px;}
.rs-hinweis{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.rs-entwurf{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r-karte, 14px);
  color:var(--wait);background:var(--wait-soft);}
.rs-entwurf svg{flex:none;width:16px;height:16px;margin-top:1px;}
.rs-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.rs-knoepfe .btn svg{width:15px;height:15px;}
.rs-text{--farbe:var(--accent);font-size:13.5px;line-height:1.6;background-color:var(--surface);}
.rs-text h3{font-size:17px;}
.rs-text h4{font-size:14px;margin-top:18px;}

/* Das Haekchen bei der Registrierung: Kaestchen links, der Satz mit den beiden Links rechts. */
.zg-agb{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:8px;margin:2px 0 0;text-align:left;}
.zg-agb-haken{display:grid;place-items:center;width:34px;height:34px;margin:-5px 0 0 -6px;padding:0;
  border:none;border-radius:10px;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.zg-agb-haken:active .kaestchen{transform:scale(.88);transition-duration:.06s;}
.zg-agb-haken:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.zg-agb-text{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer;}
.rs-inline{display:inline;padding:0;border:none;background:none;cursor:pointer;
  font:inherit;font-weight:700;color:var(--accent-deep);
  text-decoration:underline;text-underline-offset:2px;
  -webkit-tap-highlight-color:transparent;}

/* In der Hilfe: vier Knoepfe zu den Seiten. */
.rs-hilfe{flex-wrap:wrap;gap:8px;}