/* ============================================
   BASE.CSS — Immobilien Center Aalen
   Reset, Variablen, Typografie, Container
   ============================================ */

:root {
  --navy: #002770;
  --navy-dark: #001a50;
  --navy-light: rgba(0,39,112,0.07);
  --green: #7FC509;
  --green-dark: #5a8c06;
  --green-light: rgba(127,197,9,0.13);
  --white: #fff;
  --gray-bg: #f5f5f3;
  --gray-text: #222;
  --gray-muted: #666;
  --border: #e2e2e2;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; scroll-padding-top: 160px }
body {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-text);
  background: var(--white);
  padding-top: 60px;
}
h1,h2,h3,h4 { font-family: 'Poppins', sans-serif; color: var(--navy); line-height: 1.2 }
a { color: var(--navy); text-decoration: none }
a:hover { text-decoration: underline }
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px }

/* SECTIONS */
.section { padding: 72px 0 }
.section-alt { background: var(--gray-bg) }
.section-navy { background: var(--navy); color: white }
.section-navy h2, .section-navy h3 { color: white }
.label {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green);
  margin-bottom: 10px;
}
.section-navy .label { color: var(--green) }
.section-heading {
  font-size: clamp(22px,4vw,34px);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-sub {
  font-size: 17px;
  color: var(--gray-muted);
  margin-bottom: 44px;
  max-width: 680px;
}
.section-navy .section-sub { color: rgba(255,255,255,0.7) }

/* SCROLL ANIMATIONEN */
.fade-in { opacity: 0; transform: translateY(50px); transition: opacity .9s ease, transform .9s ease }
.fade-in.visible { opacity: 1; transform: translateY(0) }
.fade-in-left { opacity: 0; transform: translateX(-50px); transition: opacity .9s ease, transform .9s ease }
.fade-in-left.visible { opacity: 1; transform: translateX(0) }
.fade-in-right { opacity: 0; transform: translateX(50px); transition: opacity .9s ease, transform .9s ease }
.fade-in-right.visible { opacity: 1; transform: translateX(0) }

/* SKELETON LOADING */
.skeleton {
  background: linear-gradient(90deg,#eee 25%,#e0e0e0 50%,#eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }

/* RESPONSIVE */
@media(max-width:768px) {
  .section { padding: 52px 0 }
}