/* ===================================================================
   assets/css/finance.css
   Spezifische Styles für die Finanzmanagement-Seite (mobile-first)
   =================================================================== */

/* ---------- HERO ---------- */
/* Abstand unter Fixed-Header mit clamp (robust auf Mobile & Desktop) */
.finance-hero{
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 0;
  padding: calc(var(--header-height, 80px) + clamp(1rem, 6vh, 2.5rem)) 1rem clamp(1rem, 5vh, 2rem);
}
/* Titel sicher zentrieren */
.finance-hero h1{
  color: var(--white);
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  margin: 0 auto .35rem;              /* enger unter dem Titel */
  text-align: center !important;
  display: block;
}
.finance-hero .lead{
  max-width: 900px;
  margin: .1rem auto 0;               /* näher an den Titel rücken */
  color: var(--text-light);
  opacity: .95;
  line-height: 1.58;                  /* etwas kompakter */
}

/* ---------- CONTENT-BLOCK (mit dunkler Glasoptik) ---------- */
/* Container auf Mobile breiter: weniger Seiten-Padding, max-width 96vw */
.finance-content{
  position: relative;
  z-index: 2;
  margin: 3rem 0 4rem;
}
.finance-content .container{
  max-width: min(96vw, 1100px);
  padding: clamp(16px, 3.5vw, 28px);
  background: rgba(0, 31, 48, 0.6);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  color: var(--text-light);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
}

/* Desktop: wieder etwas mehr Innenabstand */
@media (min-width: 992px){
  .finance-content .container{
    padding: 2rem;
    max-width: var(--container-width, 1000px);
  }
}

/* ---------- Überschriften im Inhalt (weiß & zentriert für H2) ---------- */
.finance-content h2{
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--white);
  text-align: center;
  margin-bottom: 1.25rem;
}
.finance-content h3{
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--white);
  margin-top: 2rem;
  margin-bottom: .8rem;
}

/* ---------- Text & Listen ---------- */
.finance-content p{
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.finance-content ul{
  list-style: disc inside;
  margin: .25rem 0 1.3rem 1rem;
  color: var(--text-light);
}
.finance-content ul li{
  margin-bottom: .5rem;
}

/* ---------- CTA (Kontaktformular) ---------- */
.finance-cta{
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
  gap: .75rem;
}
.finance-cta .btn-primary{
  background: var(--accent);
  color: var(--text-light);
  padding: .75rem 1.2rem;
  border-radius: .5rem;
  border: none;
  font-weight: 700;
  text-decoration: none;
}
.finance-cta .btn-primary:hover{
  background: #DB8E1E;
}

/* ---------- Optionale Hero-Grafik ---------- */
.finance-hero .finance-image{
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  margin-top: 1rem;
}

/* ---------- Mobile Tweaks ---------- */
/* Auf Mobile: Hero-Inhalt vertikal mittig; engeres Gap zwischen H1 und Lead */
@media (max-width: 768px){
  .finance-hero{
    min-height: calc(100vh - var(--header-height, 72px));
    min-height: calc(60svh - var(--header-height, 72px)); /* moderne Viewports */
    display: grid;
    place-content: center;
    row-gap: .35rem;                  /* engerer Abstand zwischen den Elementen */
    padding: calc(var(--header-height, 2px) + 0.4rem) .9rem 1rem;
  }
  .finance-hero h1{
    margin-bottom: 0rem;            /* noch näher dran auf Mobile */
  }
  .finance-hero .lead{
    margin: 0 auto;                   /* direkt unter dem Titel */
    line-height: 1.55;
  }
  .finance-content .container{
    padding: clamp(14px, 3.5vw, 22px);
  }
}

/* Buttons auf sehr kleinen Screens volle Breite */
@media (max-width: 520px){
  .finance-cta .btn-primary{
    width: 100%;
    text-align: center;
  }
}