/* =========================
   STYLE.CSS  –  ConsultPro
   ========================= */

/* ---------- Root & Reset ---------- */
:root{
  /* Palette – Complementary Scheme */
  --clr-primary: #1e88e5;   /* Blau */
  --clr-primary-dark: #1565c0;
  --clr-accent: #ff6f00;   /* Orange */
  --clr-accent-dark: #e65100;
  --clr-bg: #f4f7fb;
  --clr-glass: rgba(255,255,255,0.15);
  --clr-border: rgba(255,255,255,0.30);
  --clr-text-dark: #222222;
  --clr-text-light: #ffffff;
  --radius: 16px;
  --transition: .35s cubic-bezier(.25,.8,.25,1);
  --shadow-3d: 0 10px 20px rgba(0,0,0,.15),
               0 6px 6px rgba(0,0,0,.15);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Open Sans',sans-serif;
  color:var(--clr-text-dark);
  background:var(--clr-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:'Raleway',sans-serif;
  font-weight:600;
  line-height:1.25;
  text-align:center;
  color:var(--clr-text-dark);
  text-shadow:1px 1px 3px rgba(0,0,0,.15)
}
img{display:block;max-width:100%;height:auto}

/* ---------- Utility ---------- */
.container{width:90%;max-width:1280px;margin:0 auto}
.section-title{margin:64px 0 32px;font-size:2rem}
.center{display:flex;justify-content:center;align-items:center;text-align:center}
.mt-2{margin-top:2rem}
.mb-2{margin-bottom:2rem}

/* ---------- Glassmorphism Block ---------- */
.glass{
  background:var(--clr-glass);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-3d);
}

/* ---------- Header ---------- */
.header{
  position:fixed;
  top:0;left:0;width:100%;z-index:999;
  padding:12px 0;
  backdrop-filter:blur(12px) saturate(160%);
  background:rgba(255,255,255,0.85);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.logo{
  font-family:'Raleway',sans-serif;
  font-weight:800;
  font-size:1.5rem;
  color:var(--clr-primary);
  text-decoration:none
}
.logo span{color:var(--clr-accent)}
header nav{display:flex;align-items:center;justify-content:flex-end}
header nav ul{display:flex;gap:1.25rem;list-style:none}
header nav a{
  color:var(--clr-text-dark);
  text-decoration:none;
  font-weight:600;
  transition:color var(--transition)
}
header nav a:hover{color:var(--clr-primary)}
#burger{display:none;background:none;border:none;cursor:pointer}
#burger span{
  display:block;width:24px;height:3px;margin:5px;
  background:var(--clr-text-dark);transition:all .3s
}

/* ---------- Hero ---------- */
.hero{
  width:100%;
  padding:180px 0 120px;
  display:flex;
  align-items:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  position:relative;
}
.hero-content{max-width:680px;margin:0 auto;text-align:center}
.hero h1,.hero p{color:var(--clr-text-light)}
.hero .btn-primary{margin-top:24px}

/* ---------- Buttons ---------- */
.btn,.btn-primary,.btn-secondary,button,input[type='submit']{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:14px 32px;
  font-weight:600;
  text-decoration:none;
  border-radius:var(--radius);
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
  display:inline-block;
}
.btn-primary{
  background:var(--clr-primary);
  color:var(--clr-text-light);
  box-shadow:0 8px 15px rgba(30,136,229,.25);
}
.btn-primary:hover{background:var(--clr-primary-dark);transform:translateY(-2px)}
.btn-secondary{
  background:var(--clr-accent);
  color:var(--clr-text-light);
  box-shadow:0 8px 15px rgba(255,111,0,.25);
}
.btn-secondary:hover{background:var(--clr-accent-dark);transform:translateY(-2px)}

/* ---------- Card ---------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-3d);
  transition:transform var(--transition)
}
.card:hover{transform:translateY(-6px)}
.card-image{
  width:100%;
  height:280px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto
}
.card-content{padding:24px}
.card-content h3{margin-bottom:12px;font-size:1.25rem}

/* ---------- Grid Layouts ---------- */
.card-grid{
  display:grid;
  grid-gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  grid-gap:24px
}

/* ---------- Accordion ---------- */
details{background:#fff;border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow-3d)}
details summary{
  cursor:pointer;
  padding:18px 24px;
  font-weight:600;
  color:var(--clr-primary);
  list-style:none
}
details[open] summary{border-bottom:1px solid #eee}
details p{padding:18px 24px}

/* ---------- Progress ---------- */
.progress-wrapper{margin-top:24px}
.progress{width:100%;height:10px;background:#ddd;border-radius:5px;overflow:hidden}
.progress-bar{
  height:10px;
  background:linear-gradient(135deg,var(--clr-accent),var(--clr-primary));
  width:0;animation:progressAnim 2.5s forwards
}
@keyframes progressAnim{to{width:70%}}

/* ---------- Resource Links ---------- */
.resource-links{list-style:none;text-align:center}
.resource-links li{margin:8px 0}
.resource-links a{
  color:var(--clr-accent);
  font-weight:600;
  position:relative;
  transition:color var(--transition)
}
.resource-links a::after{
  content:'';
  position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--clr-accent);
  transition:width var(--transition)
}
.resource-links a:hover{color:var(--clr-accent-dark)}
.resource-links a:hover::after{width:100%}

/* ---------- Contact Form ---------- */
.contact-form{
  padding:40px;
  max-width:640px;
  margin:0 auto
}
.field{display:flex;flex-direction:column;margin-bottom:20px}
.field label{margin-bottom:6px;font-weight:600}
.field input,.field textarea{
  padding:14px 18px;
  border:2px solid transparent;
  border-radius:var(--radius);
  background:rgba(255,255,255,0.9);
  font-family:'Open Sans',sans-serif;
  transition:border var(--transition),box-shadow var(--transition)
}
.field input:focus,.field textarea:focus{
  outline:none;
  border:2px solid var(--clr-primary);
  box-shadow:0 0 0 4px rgba(30,136,229,.2)
}

/* ---------- Footer ---------- */
footer{
  margin-top:64px;
  padding:48px 0 24px;
  background:linear-gradient(135deg,var(--clr-primary-dark),var(--clr-primary));
  color:var(--clr-text-light)
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  grid-gap:32px
}
footer h3{color:#fff;margin-bottom:12px;font-size:1.1rem}
footer a{
  color:#fff;
  text-decoration:none;
  transition:opacity var(--transition)
}
footer a:hover{opacity:.75}
.social-link{font-weight:600;margin-right:12px}
copyright{margin-top:32px;text-align:center;font-size:.875rem}

/* ---------- Links 'Weiterlesen' ---------- */
a.read-more{
  display:inline-block;
  margin-top:12px;
  color:var(--clr-primary);
  font-weight:600;
  position:relative;
  transition:color var(--transition)
}
a.read-more::after{
  content:'→';
  margin-left:6px;
  transition:transform var(--transition)
}
a.read-more:hover{color:var(--clr-primary-dark)}
a.read-more:hover::after{transform:translateX(4px)}

/* ---------- 3D Hover ---------- */
.card, .btn, .gallery figure{
  transform-style:preserve-3d;
  perspective:800px
}
.card:hover, .btn:hover{
  box-shadow:0 12px 25px rgba(0,0,0,.2);
  transform:translateY(-4px) rotateX(3deg) rotateY(-3deg)
}

/* ---------- Burger Menu (Mobile) ---------- */
@media (max-width:992px){
  header nav ul{
    position:fixed;
    top:68px;right:-100%;
    width:240px;height:calc(100vh - 68px);
    flex-direction:column;
    background:#fff;
    padding:32px 24px;
    transition:right var(--transition);
    box-shadow:-4px 0 10px rgba(0,0,0,.1)
  }
  header nav ul.active{right:0}
  #burger{display:block}
  #burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  #burger.open span:nth-child(2){opacity:0}
  #burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ---------- Page Specific ---------- */
.hero.small{padding:120px 0}
.success-page{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.legal-page{padding-top:100px}
.hero h1.text-light,.hero p.text-light{color:#fff}

/* ---------- Parallax Background ---------- */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
  z-index:1
}
.parallax::before{
  content:'';
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.45);
  z-index:-1
}

/* ---------- Animations on Scroll ---------- */
[data-aos]{transition:opacity .6s ease,transform .6s ease}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#e5e5e5;border-radius:8px}
::-webkit-scrollbar-thumb{background:var(--clr-primary);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--clr-primary-dark)}