/* ==========================
   Allfinanz – Page Base
   ========================== */

body.allfinanz-page{
  background:#000;
  color:#f5f5f7;
}

/* Alle Sections auf der Allfinanz-Seite */
body.allfinanz-page main section{
  padding:96px 0;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Hero ohne obere Linie */
body.allfinanz-page main section.af-hero{
  border-top:none;
}

/* Container optional etwas schmaler wirken lassen */
body.allfinanz-page main .container{
  max-width:1080px;
}

/* ==========================
   HERO
   ========================== */

.af-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at top, #222328 0, #050507 45%, #000 100%);
  overflow:hidden;
}

.af-hero-glow{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(0,113,227,.65), transparent 70%);
  filter:blur(16px);
  opacity:0; /* Startzustand – blendet ein */
  z-index:-1;
  top:50%;
  left:50%;
  transform:translate(-50%,-52%) scale(.9);
  animation:afGlowIn 1.4s ease-out .3s forwards;
}

.af-hero-inner{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  opacity:0;
  transform:translateY(24px);
  animation:afHeroIn 0.9s ease-out .15s forwards;
}

.af-hero-eyebrow{
  font-size:.75rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#8f98a0;
  margin-bottom:18px;
}

.af-hero-title{
  font-size:clamp(3rem, 5vw, 4.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin-bottom:18px;
}

.af-hero-sub{
  font-size:1.05rem;
  max-width:640px;
  color:#d0d3d8;
  line-height:1.7;
  margin:0 auto;
}

.af-hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
  justify-content:center;
}

.af-pill{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  padding:8px 14px;
  font-size:.8rem;
  color:#c8ccd2;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(12px);
}

/* ==========================
   CONTENT SECTIONS
   ========================== */

.af-section{
  background:#000;
}

.af-section-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  column-gap:48px;
  align-items:center;
}

.af-section-grid--reverse{
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
}

.af-section-text{
  font-size:.98rem;
}

.af-eyebrow{
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#8f98a0;
  margin-bottom:.4rem;
}

.af-section-text h2{
  font-size:2.1rem;
  letter-spacing:-.01em;
  margin-bottom:.6rem;
}

.af-section-text p{
  color:#d0d3db;
  line-height:1.8;
  margin-bottom:1rem;
}

/* Bild/Visual-Karten rechts/links (Desktop) */
.af-section-media{
  display:flex;
  justify-content:flex-end;
}

.af-section-grid--reverse .af-section-media{
  justify-content:flex-start;
}

.af-media-card{
  width:100%;
  max-width:420px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle at top left,rgba(255,255,255,.10),rgba(10,10,10,1));
  box-shadow:0 20px 60px rgba(0,0,0,.85);
  padding:14px;
}

.af-media-card img{
  display:block;
  width:100%;
  border-radius:18px;
}

/* ==========================
   CTA SECTION
   ========================== */

.af-section-cta{
  text-align:center;
  background:
    radial-gradient(circle at top, #1c1f27 0, #050608 45%, #000 100%);
}

.af-section-cta-inner{
  max-width:640px;
  margin:0 auto;
}

.af-section-cta-inner h2{
  font-size:2.2rem;
  margin-bottom:.6rem;
}

.af-section-cta-inner p{
  color:#d0d3db;
  line-height:1.8;
  margin-bottom:1rem;
}

.af-cta-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:18px 0 10px;
}

.af-cta-note{
  font-size:.85rem;
  color:#8f98a0;
}

/* Buttons auf dunklem Hintergrund leicht „glowig“ */
body.allfinanz-page .btn-primary{
  box-shadow:0 14px 28px rgba(0,113,227,.5);
}
body.allfinanz-page .btn-primary:hover{
  box-shadow:0 18px 40px rgba(0,113,227,.7);
}

.btn-whatsapp-black{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  border-radius:980px;
  font-weight:600;
  font-size:.95rem;
  background:#000;
  color:#ffffff;
  border:1px solid rgba(255,255,255,.16);
  cursor:pointer;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}

.btn-whatsapp-black:hover{
  background:#111111;
  border-color:rgba(255,255,255,.25);
  transform:translateY(-1px);
}

.btn-whatsapp-black:active{
  transform:translateY(0);
}

/* ==========================
   ANIMATIONS
   ========================== */

@keyframes afGlowIn{
  from{
    opacity:0;
    transform:translate(-50%,-52%) scale(.9);
  }
  to{
    opacity:.85;
    transform:translate(-50%,-50%) scale(1);
  }
}

@keyframes afHeroIn{
  from{
    opacity:0;
    transform:translateY(28px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ==========================
   RESPONSIVE
   ========================== */

@media (max-width:960px){

  /* kompaktere Sections */
  body.allfinanz-page main section{
    padding:72px 0;
  }

  /* HERO: Inhalt mittig im Screen */
  .af-hero{
    margin:0;
    min-height:100vh;
    padding:140px 16px 80px;
    display:flex;
    align-items:center;
  }

  .af-hero .container{
    max-width:100%;
  }

  .af-hero-inner{
    max-width:100%;
    margin:0 auto;
    text-align:center;
  }

  .af-hero-sub{
    margin-left:auto;
    margin-right:auto;
  }

  .af-hero-pills{
    justify-content:center;
  }

  /* SEKTIONEN: Text oben, Bild unten – alles mittig */
  .af-section-grid,
  .af-section-grid--reverse{
    display:flex;                 /* Grid aus */
    flex-direction:column;
    align-items:center;
    row-gap:26px;
  }

  .af-section-text{
    order:1;
    text-align:center;
  }

  .af-section-media{
    order:2;
    display:flex;
    justify-content:center !important;
    width:100%;
    margin-top:6px;
  }

  .af-section-grid--reverse .af-section-media{
    justify-content:center !important;
  }

  /* Rahmen mobil weg, Karte / Bild wirklich mittig */
  .af-media-card{
    max-width:360px;
    margin:0 auto;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0;
  }

  .af-media-card img{
    width:100%;
    display:block;
    border-radius:18px;
  }
}

@media (max-width:640px){
  .af-hero-title{
    font-size:2.6rem;
  }
  .af-hero-sub{
    font-size:.98rem;
  }

  .af-section-text h2{
    font-size:1.8rem;
  }
}