/* ===================================================================
   assets/css/wealth.css
   Vermögensverwaltung – Page Styles (mobile-first)
   (nutzt Variablen aus style.css: Farben, Radius, Container)
   =================================================================== */

/* Seite nicht unter den Header rutschen lassen */
.wealth-page{
  padding-top: calc(1rem + var(--header-height, 80px));
  color: var(--text-light, #fff);
}

/* --- Container breiter auf Mobile (weniger Seiten-Padding, volle Breite) --- */
@media (max-width: 900px){
  .wealth-page .container{
    max-width: 100%;
    padding-left: clamp(12px, 4vw, 28px);
    padding-right: clamp(12px, 4vw, 28px);
  }
}
@media (max-width: 480px){
  .wealth-page .container{
    padding-left: clamp(10px, 3.5vw, 20px);
    padding-right: clamp(10px, 3.5vw, 20px);
  }
}

/* ---------- HERO ---------- */
.wealth-hero{
  text-align: center;
  padding: 3.25rem 1rem 2.25rem;
}
.wealth-hero h1{
  color: var(--white, #fff);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  margin: 0 0 .5rem;
  text-align: center;                 /* Titel explizit zentrieren */
}
.wealth-hero .lead{
  max-width: 820px;
  margin: 0 auto 1.25rem;
  color: var(--text-light, #fff);
  opacity: .95;
  line-height: 1.6;
}
.wealth-hero .hero-cta{
  display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem;
}

/* ---------- GENERISCHE ABSCHNITTE ---------- */
.wealth-section{
  margin: 2.5rem 0;
}
.wealth-section > .container > h2{
  color: var(--white, #fff);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 0 0 1rem;
  text-align: center;                 /* Sektionstitel harmonisch zentrieren */
}

/* ---------- CARDS / FEATURES ---------- */
.feature-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* Früher auf 2 Spalten hochschalten (größere Phones) */
@media (min-width: 560px){
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .feature-grid{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  background: rgba(0, 31, 48, .82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius, .5rem);
  padding: 1rem .95rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.32);
}
.card h3{
  color: var(--white, #fff);
  margin: 0 0 .35rem;
  font-size: 1.05rem;
}
.card p{
  color: var(--text-light, #fff);
  opacity: .95;
  line-height: 1.55;
}

/* ---------- PANEL BLUE (Ablauf / Kosten) ---------- */
.panel-blue{
  background: var(--primary-dark, #001F30);
  border-radius: var(--radius, .5rem);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  padding: 2rem 0;
}
.panel-blue.soft{ background: #00263D; }
.panel-blue h2{ color: var(--white, #fff); }
.panel-blue .container > *:last-child{ margin-bottom: 0; }

/* Ablauf Steps */
.steps{
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
@media (min-width: 720px){
  .steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .steps{ grid-template-columns: repeat(5, 1fr); }
}
.steps li{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius, .5rem);
  padding: .9rem .85rem;
}
.steps h4{
  margin: 0 0 .35rem;
  color: var(--text-light, #fff);
  font-size: 1rem;
}
.steps p{
  margin: 0;
  color: var(--text-light, #fff);
  opacity: .95;
  line-height: 1.5;
}
.panel-cta{
  display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem;
  margin-top: 1rem;
}

/* Pricing / Transparenz */
.pricing-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  margin-top: .5rem;
}
@media (min-width: 900px){
  .pricing-grid{ grid-template-columns: repeat(3, 1fr); }
}
.pricing-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius, .5rem);
  padding: 1rem .95rem;
}
.pricing-card h3{
  color: var(--text-light, #fff);
  margin: 0 0 .35rem;
  font-size: 1.05rem;
}
.pricing-card p{
  margin: 0;
  color: var(--text-light, #fff);
  opacity: .95;
  line-height: 1.5;
}
.fineprint{
  margin-top: .9rem;
  font-size: .92rem;
  color: var(--text-light, #fff);
  opacity: .9;
}

/* ---------- FAQ ---------- */
.faq{
  display: grid;
  gap: .6rem;
}
.faq details{
  background: rgba(0, 31, 48, .82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius, .5rem);
  padding: .75rem .9rem;
}
.faq summary{
  cursor: pointer;
  color: var(--text-light, #fff);
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq details[open]{
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.faq p{
  margin: .55rem 0 0;
  color: var(--text-light, #fff);
  line-height: 1.55;
}

/* ---------- Buttons ---------- */
.btn-primary{
  background: var(--accent, #F5A623);
  color: #121212;
  padding: .75rem 1.2rem;
  border-radius: .5rem;
  border: none;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover{ filter: brightness(.95); }

/* ---------- Responsive Offsets ---------- */
@media (max-width: 768px){
  .wealth-hero{ padding: 2.5rem .75rem 1.75rem; } /* etwas weniger Seiten-Padding für mehr Breite */
}

/* Zusätzlicher Abstand zum Footer auf kleinen Screens */
@media (max-width: 600px){
  .wealth-page{ padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
}