/* ==========================================================================
   VaultAI - Lesetexte: Rechtsseiten und Ratgeber
   Ergaenzt assets/base.css, bringt keine eigenen Tokens mit.

   Modus "Read" laut DESIGN.md: hier gewinnt Lesbarkeit gegen Ausdruck.
   Deshalb schmalere Spalte, groessere Zeilenhoehe, ruhigere Hierarchie.
   ========================================================================== */

.legal{padding:clamp(44px,6vw,72px) 0 clamp(40px,5vw,64px)}

/* 68 Zeichen sind die bequeme Obergrenze fuer laufenden Text. Rechtstexte
   werden am Stueck gelesen, da faellt eine zu breite Spalte sofort auf. */
.legal .wrap{max-width:760px}

.legal h1{
  font-size:clamp(1.95rem,4vw,2.7rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.08;margin-bottom:14px;
}
.legal .updated{color:var(--text-dim);font-size:var(--fs-sm);margin-bottom:6px}

.legal h2{
  font-size:1.32rem;font-weight:650;letter-spacing:-.022em;
  margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--border);
}
.legal h2:first-of-type{margin-top:36px}
.legal h3{font-size:1.05rem;font-weight:600;margin:28px 0 8px}

.legal p{color:var(--text-muted);margin-bottom:15px;line-height:1.75}
.legal ul,.legal ol{color:var(--text-muted);margin:0 0 18px 22px;line-height:1.75}
.legal li{margin-bottom:8px}
.legal strong{color:var(--text);font-weight:600}

.legal a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){ .legal a:hover{text-decoration-thickness:2px} }

/* Flaechige Links sind keine Fliesstext-Links. Die Unterstreichung muss hier
   am <a> selbst aus, denn text-decoration vererbt sich und laesst sich von
   Kindelementen nicht wieder abschalten. */
.legal a.art-card,
.legal a.btn,
.legal a.link-arrow{text-decoration:none;color:inherit}
.legal a.btn-primary{color:var(--accent-ink)}
.legal a.link-arrow{color:var(--accent-text)}

/* Anschriften- und Hinweisbloecke */
.legal .addr{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:20px 22px;margin:20px 0;color:var(--text);line-height:1.75;
}
.legal .note{
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);
  padding:16px 20px;margin:26px 0;font-size:var(--fs-sm);color:var(--text-muted);
}
.legal hr{border:0;border-top:1px solid var(--border);margin:40px 0}

/* Tabellen scrollen fuer sich, statt die Seite breit zu machen */
.legal .table-scroll{overflow-x:auto;margin:18px 0}
.legal table.wd{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:420px}
.legal table.wd td,.legal table.wd th{
  border:1px solid var(--border);padding:11px 14px;
  color:var(--text-muted);vertical-align:top;text-align:left;
}
.legal table.wd th{color:var(--text);font-weight:600}

/* ---------- Ratgeber ---------- */
.art-meta{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  color:var(--text-dim);font-size:var(--fs-sm);margin-bottom:28px;
}

/* --- Lesefortschritt: schmale Akzentlinie am oberen Rand ----------------
   Scroll-Feedback, kein Auto-Motion; bleibt daher auch bei reduced-motion. */
.read-progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:101;pointer-events:none;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.read-progress span{
  display:block;height:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
}

/* --- Editorial: der Artikel bekommt einen Lead und einen dezenten Initial.
   Nur unter .legal-article, damit Rechtsseiten unangetastet bleiben. */
.legal-article .art-meta + p{
  font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.65;
  color:var(--text);max-width:64ch;margin-bottom:26px;
}
@media (min-width:640px){
  .legal-article .art-meta + p::first-letter{
    float:left;font-size:3.2em;line-height:.82;font-weight:700;
    letter-spacing:-.02em;color:var(--accent-text);
    margin:.05em .12em 0 0;
  }
}

/* Nummerierte Warnliste: die Ziffer als Akzent-Chip, ruhig gelesen. */
.legal-article .warn-list{list-style:none;counter-reset:w;margin-left:0}
.legal-article .warn-list li{
  counter-increment:w;position:relative;padding-left:46px;margin-bottom:18px;
}
.legal-article .warn-list li::before{
  content:counter(w);position:absolute;left:0;top:.05em;
  display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--accent-weak);color:var(--accent-text);
  font-size:.9rem;font-weight:650;font-variant-numeric:tabular-nums;
}

/* Inline-Code (echte Absenderadressen usw.) sichtbar, aber ruhig. */
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;padding:.12em .4em;border-radius:6px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);word-break:break-word;
}
.art-list{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.art-card{
  display:block;padding:24px 26px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  transition:border-color .2s ease, background .2s ease, transform .18s var(--ease-out);
}
.art-card:hover{text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .art-card:hover{border-color:var(--border-2);background:var(--surface-2);transform:translateY(-2px)}
}
.art-card h2{
  margin:0 0 8px;padding:0;border:0;
  font-size:1.16rem;font-weight:650;letter-spacing:-.02em;color:var(--text);
}
.art-card p{margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
.art-card .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:var(--fs-sm);font-weight:600;color:var(--accent-text);
}
.art-card .more svg{width:15px;height:15px;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .art-card:hover .more svg{transform:translateX(3px)} }

/* App-Hinweis am Artikelende */
.cta-app{
  padding:26px 28px;margin:44px 0 12px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border-2);
}
.cta-app h2{margin:0 0 8px;padding:0;border:0;font-size:1.16rem}
.cta-app p{margin:0 0 18px;font-size:var(--fs-sm)}
.cta-app .btns{display:flex;flex-wrap:wrap;gap:10px}

/* Rechtlicher Hinweis unter Ratgeber-Artikeln */
.art-disclaimer{
  margin-top:36px;padding:16px 20px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--text-dim);line-height:1.65;
}
.art-disclaimer strong{color:var(--text-muted)}