/* Konto-Unterseiten im Dashboard-Aufbau (Leiste links, Inhalt rechts; js/konto-leiste.js modus 'seite').
   Ergaenzt css/konto-dashboard.css: die alten Vollbreiten-Koepfe (.page-header / .page-hero) und
   Inhaltsbereiche (.main-content) der Unterseiten werden in die weisse Inhaltskarte (.dbx-main) eingepasst.
   Nach den seiteneigenen <style>-Bloecken einbinden. */
.dbx-main > .page-header,
.dbx-main > .page-hero{border-radius:14px;padding:1.5rem 1.75rem;margin:0 0 1.5rem;text-align:left}
.dbx-main > .page-header .header-content,
.dbx-main > .page-hero .page-hero-inner{max-width:none;margin:0}
.dbx-main > .page-header .header-top:last-child{margin-bottom:0}
.dbx-main > .page-hero h1,
.dbx-main > .page-header h1{font-size:1.6rem}
.dbx-main > .page-hero p{margin:0}
.dbx-main > .main-content{max-width:none;margin:0;padding:0}
/* Kennzahlen im Kopf: Spaltenzahl nach verfuegbarer Breite (die Inhaltskarte ist schmaler als die alte Vollbreite) */
@media (min-width:861px){.dbx-main > .page-header .stats-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}
/* Rechtsleiste (js/components.js) bringt margin-top mit; auf dem grauen Kontogrund schien sonst ein weisser Streifen durch (wie Dashboard) */
body > .legal-bar{margin-top:0}
@media (max-width:767px){
  .dbx-main > .page-header,
  .dbx-main > .page-hero{padding:1.25rem 1rem;margin-bottom:1.25rem}
  body .dbx-main > .page-header h1,
  body .dbx-main > .page-hero h1{font-size:1.25rem !important;gap:.4rem}
  .dbx-main > .page-header h1 > [data-icon],
  .dbx-main > .page-hero h1 > [data-icon],
  .dbx-main > .page-hero h1 > svg{width:24px;height:24px;flex-shrink:0}
  .dbx-main > .page-hero p{font-size:1rem}
}