:root{
  --violet:#3B0B4F;
  --violet-dark:#25042F;
  --violet-soft:#5E2473;
  --orange:#FF7A00;
  --orange-soft:#FFB02E;
  --coral:#D41468;
  --coral-soft:#FCE8EF;
  --white:#FFFFFF;
  --cream:#FFF9F5;
  --text:#2B1731;
  --muted:#6D596F;
  --line:rgba(59,11,79,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--cream);line-height:1.55}
h1,h2,h3,p{margin-top:0}
h1,h2,.fhp{font-family:Georgia,"Times New Roman",serif}
h1{font-size:clamp(4rem,9vw,9rem);line-height:.88;letter-spacing:-.07em;color:var(--violet);max-width:1050px}
h2{font-size:clamp(2.4rem,5vw,5.5rem);line-height:.95;letter-spacing:-.055em;color:var(--violet)}
h3{font-size:1.25rem;color:var(--violet);margin-bottom:.5rem}
p{color:var(--muted)}
a{text-decoration:none}
section{scroll-margin-top:115px}

.hero{min-height:100vh;padding:22px clamp(24px,6vw,82px);background:radial-gradient(circle at 88% 12%,rgba(255,122,0,.18),transparent 28%),radial-gradient(circle at 12% 88%,rgba(212,20,104,.14),transparent 32%),linear-gradient(145deg,#ffffff 0%,#fff9f5 64%,#fce8ef 100%)}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
}
.brand{display:flex;align-items:center;gap:22px;color:var(--violet)}
.mark{display:flex;flex-direction:column;align-items:flex-start}
.fhp{font-size:88px;font-weight:900;letter-spacing:-.13em;line-height:.82;color:var(--violet)}
.cycle-dots{display:flex;gap:9px;margin-top:15px}
.cycle-dots span{width:13px;height:13px;border-radius:50%;display:block}
.cycle-dots span:nth-child(1){background:var(--violet)}
.cycle-dots span:nth-child(2){background:var(--coral)}
.cycle-dots span:nth-child(3){background:var(--orange)}
.cycle-dots span:nth-child(4){background:var(--orange-soft)}
.brand-words{display:flex;flex-direction:column;font-family:Georgia,"Times New Roman",serif;font-size:23px;line-height:1.18;color:var(--violet)}
.brand-words .accent{color:var(--orange)}
.nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{color:var(--violet);font-size:14px;font-weight:800;letter-spacing:.02em}
.nav-links a:last-child{background:var(--violet);color:white;padding:11px 18px;border-radius:999px}

.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;font-weight:750}
.button.primary{background:var(--violet);color:white}
.button.secondary{border:1px solid rgba(59,11,79,.35);color:var(--violet);background:rgba(255,255,255,.55)}
.hero-inner{padding-top:clamp(80px,12vw,165px);max-width:1120px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:850;color:var(--coral);margin-bottom:22px}
.hero-text{font-size:clamp(1.2rem,2.1vw,1.6rem);max-width:820px;margin:34px 0 0}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

.statement,.services,.audience,.about,.vision{max-width:1320px;margin:0 auto;padding:clamp(70px,9vw,125px) clamp(24px,6vw,82px)}
.statement{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.statement-right p{font-size:1.2rem}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 clamp(24px,6vw,82px) clamp(70px,9vw,120px);max-width:1320px;margin:0 auto}
.pillar,.service-grid article,.about-grid article{background:var(--white);border:1px solid var(--line);border-radius:32px;padding:28px;box-shadow:0 25px 60px rgba(59,11,79,.07)}
.pillar span{color:var(--coral);font-weight:900;letter-spacing:.12em;font-size:.8rem}
.pillar.coral{background:linear-gradient(145deg,#fff,#fce8ef)}
.pillar.orange{background:linear-gradient(145deg,#fff,#fff0df)}

.services{background:radial-gradient(circle at 90% 10%,rgba(255,122,0,.09),transparent 28%),#fff;max-width:none}
.services>p,.services>h2{max-width:1320px;margin-left:auto;margin-right:auto}
.service-grid{max-width:1320px;margin:38px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-grid article{position:relative;overflow:hidden}
.service-grid article:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--violet),var(--coral),var(--orange))}
.audience{text-align:center}
.audience h2{max-width:980px;margin-left:auto;margin-right:auto}
.audience-list,.education-topics,.about-highlights{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.audience-list span,.education-topics span,.about-highlights span{background:white;color:var(--violet);padding:13px 18px;border-radius:999px;font-weight:750;border:1px solid var(--line)}

.about{background:var(--cream)}
.about-intro{max-width:980px}
.about-intro p{font-size:1.2rem;max-width:850px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.about-grid article{background:linear-gradient(145deg,#fff,#fff9f5)}
.about-highlights{justify-content:flex-start}

.education{background:radial-gradient(circle at 90% 15%,rgba(255,122,0,.28),transparent 30%),linear-gradient(135deg,var(--violet-dark),var(--violet));padding:clamp(70px,9vw,125px) clamp(24px,6vw,82px);color:white;text-align:center}
.education h2,.education p{color:white}
.education .eyebrow{color:var(--orange-soft)}
.education p{max-width:760px;margin-left:auto;margin-right:auto;font-size:1.2rem}
.education-topics span{background:rgba(255,255,255,.10);color:white;border-color:rgba(255,255,255,.18)}
.vision{text-align:center}
.vision p{max-width:800px;margin-left:auto;margin-right:auto;font-size:1.2rem}
.cta{margin:0 clamp(24px,6vw,82px) 80px;padding:70px 30px;border-radius:44px;background:radial-gradient(circle at 15% 20%,rgba(255,122,0,.35),transparent 27%),linear-gradient(135deg,var(--violet),var(--coral));color:white;text-align:center}
.cta h2{color:white;max-width:920px;margin-left:auto;margin-right:auto}
.cta p{color:white}
.cta p span{color:var(--orange-soft)}
.cta .fhp{color:white;font-size:96px}
.cta-logo{margin-bottom:25px}
.cta .button.light{background:white;color:var(--violet)}
@media(max-width:1050px){
  .nav{align-items:flex-start;flex-direction:column}
  .nav-links{justify-content:flex-start}
}
@media(max-width:900px){
  .brand-words{font-size:17px}
  .fhp{font-size:62px}
  .statement{grid-template-columns:1fr}
  .pillars,.service-grid,.about-grid{grid-template-columns:1fr}
  h1{font-size:4.4rem}
}
.about-image {
  display: flex;
  justify-content: center;
  margin: 50px 0 60px;

}

.about-image img {
  width: 420px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  box-shadow: 0 25px 60px rgba(59,11,79,.15);
}

.cta-logo {
  width: 320px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 22px;
  background: white;
  border-radius: 26px;
  padding: 16px;

}

@media (max-width: 768px) {
  .cta-logo {
    flex-direction: column;
    gap: 16px;
    }
  }

/* CTA Hintergrund */
.cta-card,
.contact-card,
.contact-cta,
.cta {
  background: linear-gradient(
    135deg,
    #4B2E68 0%,
    #5A367C 45%,
    #6A4290 100%,
  ) !important;
  
  }

.cta-logo .brand-words span {
  color: rgba(255,255,255,0.92);
}
.cta-logo .brand-words .accent {
  color: #F7A15A;
  }


.cta-card,
.contact-card,
.contact-cta,
.cta {
  background:radial-gradient(
    135deg,
      #4B2E68 0%,
      #5A3B7C 30%,
      #6A4C93 60%,
      #7B5CA6 100%
    ) !important;
  }

/* FHP Original-Farbwelt */
.cta-card,
.contact-card,
.contact-cta,
.cta {
  background:
  radial-gradient(circle at 15% 20%, rgba(255,176,46,.35), transparent 30%),
  linear-gradient(135deg,
    var(--violet) 0%,
    #5A1A68 45%,
    var(--orange) 100%);
    ) !important;
  }
.cta h2,
.contact-cta h2,
.contact-card h2  {
  max-width: 800px;
  margin: 0 auto; 40px auto;
  line-height: 1.1;
  font-size: clamp 83rem, 5vw, 4.5rem);
  
   }

.cta .btn,
.contact-cta .btn,
.contact-card .btn {
    margin-top: 40px;

}

.cta h2,
.contact-cta h2,
.contact-card h2  {
  margin-bottom: 80px !important;
  
  }
 
.footer{

    padding:40px 20px;
    background:#f8f5ef;
    text-align:center;
    border-top:1px solid rgba(0,0,0,.08);

}

.footer p{

    margin-bottom:12px
    color:#555;
    font-size:.9rem;

}

.footer-links{

    display:flex;
    justify-content:center;

    gap:30px;

}

.footer-links a{

    color:#5A3B7C;
    text-decoration:none;
    font-weight:500;

}

.footer-links a:hover{
    color:#F58B2B;
  
  }

/* Rechtliche Seiten */

.legal-page{

background:#f8f5ef;

min-height:100vh;

padding:20px 20px;

}

.legal-box{

max-width:900px;

margin:auto;

background:white;

padding:60px;

border-radius:24px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.legal-box h1{

color:#4B2E68;

margin:40px 0;

}

.legal-box h2{

margin-top:40px;

color:#4B2E68;

}

.legal-box p{

line-height:1.8;

margin:20px 0;

}

.legal-box ul{

margin-left:20px;

line-height:1.8;

}

.legal-box hr{

margin:40px 0;

border:none;

border-top:1px solid #ddd;

}

.legal-box .btn{

margin-top:50px;

display:inline-block;
  
  }

/* ===================================

   Impressum & Datenschutz

=================================== */

.legal-page h1{

    font-size:40px !important;

    line-height:1.2 !important;

    max-width:100%;

    word-break:break-word;

}

.legal-page h2{

    font-size:28px !important;

    line-height:1.3 !important;

}

.legal-page p,

.legal-page li{

    font-size:18px !important;

    line-height:1.8;

}

.legal-box{

    max-width:900px;

    margin:60px auto;

    padding:50px;

}

@media (max-width:768px){

    .legal-page h1{

        font-size:32px !important;

    }

    .legal-page h2{

        font-size:24px !important;
       }
  
   }
      


img.custom-logo, 
.site-logo img, 
.navbar-brand img, 
header img[alt*="Logo"], 
header img[alt*="logo"] {
    max-width: 390px !important;
    height: auto !important;
    width: 100% !important;
}


.site-header, 
.header-container, 
#masthead, 
.navbar-header {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
.legal-box .logo {
  display: block;
  width: min(320px, 70vw);
  height: auto;
  margin: 0 auto 40px;
}

.footer-links .fa-instagram {
  font-size: 1.4rem;
  color: var(--violet);
  transition: 0.3s;
}

.footer-links .fa-instagram:hover {
  color: var(--orange);
}
.footer-links .fa-instagram {
  font-size: 1.4rem;
  color: var(--violet);
  transition: 0.3s;
}

.footer-links .fa-instagram:hover {
  color: var(--orange);
}
@media (max-width: 768px) {

  body{
    overflow-x:hidden;
  }

  /* Navigation */

  .nav{
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:18px 20px;
  }

  .logo{
    width:190px;
    height:auto;
  }

  .nav-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 18px;
  }

  .nav-links a{
    font-size:15px;
  }

  /* Hero */

  .hero{
    min-height:auto;
    padding:30px 20px 60px;
  }

  .hero-content{
    padding-top:30px;
    padding-left:0;
    padding-right:0;
  }

  h1{
    font-size:clamp(2.8rem,11vw,4rem);
    line-height:.95;
  }

  h2{
    font-size:clamp(2rem,8vw,3rem);
  }

  .lead{
    font-size:1.1rem;
  }

  /* Buttons */

  .hero-actions{
    flex-direction:column;
  }

  .button{
    width:100%;
  }

  /* Karten */

  .cards,
  .package-grid,
  .two-cards{
    grid-template-columns:1fr;
  }

  .package.highlighted{
    transform:none;
  }

  /* Allgemeine Abstände */

  .section{
    padding:60px 20px;
  }

  /* Bilder */

  img{
    max-width:100%;
    height:auto;
  }

@media (max-width: 768px) {

  body{
    overflow-x:hidden;
  }

  /* Navigation */

  .nav{
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:18px 20px;
  }

  .logo{
    width:190px;
    height:auto;
  }

  .nav-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 18px;
  }

  .nav-links a{
    font-size:15px;
  }

  /* Hero */

  .hero{
    min-height:auto;
    padding:30px 20px 60px;
  }

  .hero-content{
    padding-top:30px;
    padding-left:0;
    padding-right:0;
  }

  h1{
    font-size:clamp(2.8rem,11vw,4rem);
    line-height:.95;
  }

  h2{
    font-size:clamp(2rem,8vw,3rem);
  }

  .lead{
    font-size:1.1rem;
  }

  /* Buttons */

  .hero-actions{
    flex-direction:column;
  }

  .button{
    width:100%;
  }

  /* Karten */

  .cards,
  .package-grid,
  .two-cards{
    grid-template-columns:1fr;
  }

  .package.highlighted{
    transform:none;
  }

  /* Allgemeine Abstände */

  .section{
    padding:60px 20px;
  }

  /* Bilder */

  img{
    max-width:100%;
    height:auto;
  }

}
 .pillars {
  transform: none;            /* Keine Verschiebung auf dem Handy */
  margin-top: 30px;           
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;     
  gap: 20px;
  padding: 0 20px;            
}

/* 2. Desktop: Greift ab 1024px und überschreibt den Handy-Style automatisch */
@media (min-width: 1024px) {
  .pillars {
    display: flex;
    flex-direction: row;      
    gap: 15px;
    /* Jetzt greift dieser Wert sauber ohne Blockade */
    transform: translate(20px, -280px) scale(0.85);
    transform-origin: top left;
    margin-bottom: -250px;    
  }
    }
  @media (min-width: 1024px) {
  .pillars {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    
    /* Wir nutzen margin statt transform, das hebelt alte Blockaden oft aus */
    margin-left: 20px !important; 
    margin-top: -280px !important; 
    margin-bottom: -250px !important;
    
    /* Setzt das transform vom Handy zur Sicherheit auf dem PC zurück */
    transform: scale(0.85) !important; 
    transform-origin: top left !important;
  }
}