/* ============================================================================
   agentbooks.de — Textseiten (Rechts- und Infoseiten)
   Seitenklassen (Präfix doc-, konfliktfrei zu den ab-* des Design-Systems).
   Gemeinsame Komponente für about.html, help.html, impressum.html,
   datenschutz.html, agb.html — reine Inhaltsseiten ohne Interaktion, ohne
   eigenes <seite>.js. Wiederverwendet die vorhandenen DS-Bausteine
   (--container-reading, .ab-reading, .ab-toc, .ab-callout, .ab-table,
   .ab-metadata) statt sie nachzubauen. DS-CSS bleibt unangetastet.
   ============================================================================ */

/* ---- Seitenrahmen (Page + sticky TopNav, analog lib-/tw-sticky) ---- */
.doc-sticky{position:sticky;top:0;z-index:30}
.doc-page{max-width:var(--container-reading);margin:0 auto;padding:var(--space-16) var(--space-12) var(--space-24)}

/* ---- Seitenkopf ---- */
.doc-eyebrow{margin-bottom:var(--space-3)}
.doc-head{padding-bottom:var(--space-8);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-8)}
.doc-lead{margin-top:var(--space-3)}
.doc-meta{margin-top:var(--space-5)}

/* ---- Inhaltsverzeichnis (nur datenschutz.html, agb.html) ---- */
.doc-toc-wrap{border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-card);padding:var(--space-5);margin-bottom:var(--space-10)}
.doc-toc-title{margin-bottom:var(--space-3)}
/* Die Nutzungsbedingungen haben zwei Teile (Kauf und Vertrag / Nutzung und
   Lizenz): der zweite Teiltitel im Inhaltsverzeichnis und die Trenner im
   Text brauchen Luft nach oben, sonst kleben sie am vorigen Eintrag. */
.ab-toc .doc-toc-title:not(:first-child){margin-top:var(--space-6)}
.doc-body .doc-eyebrow{margin-top:var(--space-12)}
.doc-toc-wrap .ab-toc__item{padding-left:0}

/* ---- Fließtext (Sprungziele, Absätze, Listen, Tabellen, Callouts) ---- */
.doc-body h2{margin-top:var(--space-12);margin-bottom:var(--space-3);scroll-margin-top:calc(var(--header-height) + var(--space-5))}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{margin-top:var(--space-8);margin-bottom:var(--space-2)}
.doc-body p{margin-top:var(--space-4)}
.doc-body p:first-child,.doc-body h2 + p,.doc-body h3 + p{margin-top:var(--space-3)}
.doc-body ul,.doc-body ol{margin:var(--space-4) 0 0;padding-left:1.3em;font-family:var(--font-reading);font-size:var(--fs-body-lg);line-height:var(--lh-reading);max-width:var(--measure-reading)}
.doc-body li + li{margin-top:var(--space-2)}
.doc-body address{font-style:normal;margin-top:var(--space-4)}
.doc-body a{color:var(--text-link)}

.doc-callout{margin-top:var(--space-6)}
.doc-table-wrap{margin-top:var(--space-6)}

/* ---- FAQ: nur noch die Gruppierung der Hilfeseite. Das Akkordeon selbst
       ist seit dem 30.08.2026 die geteilte Komponente .faq-* in css/faq.css. ---- */
.doc-faq-group{margin-top:var(--space-10)}
.doc-faq-group:first-child{margin-top:0}
.doc-faq-group-title{margin-bottom:var(--space-4)}

/* ---- Abschließender CTA-Block ---- */
.doc-cta{margin-top:var(--space-16);padding-top:var(--space-8);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.doc-cta-actions{display:flex;gap:var(--space-3);flex:none}

/* ============================================================================
   RESPONSIVE — Gutter-Stufen 48/32/20 wie css/gen/library.css.
   ============================================================================ */

@media (max-width:1024px){
  .doc-topnav{padding:0 var(--space-8)}
  .doc-page{padding:var(--space-12) var(--space-8) var(--space-20)}
}

@media (max-width:720px){
  .doc-topnav{height:var(--header-height-mobile);padding:0 var(--space-5);gap:var(--space-3)}
  .doc-topnav .ab-topnav__links{display:none}
  .doc-page{padding:var(--space-10) var(--space-5) var(--space-16)}
  .doc-cta{flex-direction:column;align-items:stretch}
  .doc-cta-actions{flex-direction:column}
}