:root{
  --brand-red:#c62828;
  --brand-blue:#1a3d7c;
  --bg:#f7f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --maxw:1100px;
  --radius:10px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:#111;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:24px}

/* ----------------- Header (schmal, weiß) ----------------- */
.site-header{background:#fff;border-bottom:1px solid rgba(15,23,42,0.06)}
.header-inner{display:flex;align-items:center;gap:16px;padding:10px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:44px;width:auto;display:block}
.brand{font-size:18px;font-weight:700;color:var(--brand-blue);line-height:1}
.subbrand{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.header-right{margin-left:auto}
.header-email{color:var(--brand-blue);text-decoration:none;font-weight:600}

/* ----------------- Sticky Hinweisbanner ----------------- */
.notice-banner{
  background: linear-gradient(90deg, rgba(198,40,40,0.06), rgba(198,40,40,0.08));
  border-top: 3px solid var(--brand-red);
  color: #6b1b1b;
  font-weight:600;
  padding:10px 0;
  text-align:center;
  z-index:999;
}
.notice-banner p{margin:0}
@media (min-width:880px){
  .notice-banner{position:sticky;top:0}
}

/* ----------------- HERO (bildstark, aufgehellt) ----------------- */
.hero{position:relative;overflow:hidden;height:64vh;min-height:380px;display:flex;align-items:center}
.hero-bg{
  position:absolute;inset:0;
  background-image: url('../img/croelle_immobilien.jpg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform-origin:center center;
  will-change:transform;
  transition:transform 0.6s ease;
  /* Bild insgesamt heller machen */
  filter:brightness(0.82) saturate(1.02);
  z-index:0;
}
@keyframes hero-kenburns {0%{transform:scale(1)}100%{transform:scale(1.08)}}
.hero-bg.animate{animation:hero-kenburns 18s linear infinite alternate}
@media (hover:hover) and (pointer:fine){ .hero:hover .hero-bg{transform:scale(1.12)} }

/* Helleres, subtileres Overlay für bessere Bildwirkung */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.06) 0%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0.28) 100%);
  z-index:1;
}

.hero-content{position:relative;z-index:2;width:100%;padding:28px}
.hero-inner{max-width:900px;color:#fff;padding:18px}
.hero-inner h1{font-size:clamp(28px,4.2vw,44px);margin:0 0 10px;line-height:1.02;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,0.35)}
.hero-inner p{margin:0 0 18px;color:rgba(255,255,255,0.95);font-size:clamp(16px,2.2vw,18px)}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.btn-primary{background:#ffffff;color:var(--brand-blue)}
.btn-secondary{background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.18)}

/* ----------------- Intro full-width (conaier) ----------------- */
.intro-panel{width:100%}
.conaier{
  background-image: radial-gradient(circle farthest-corner at 67% 50%, #4fa3ff 10%, #1a3d7c 69%);
  color: #ffffff;
  padding: 36px 0;
  box-shadow: 0 8px 30px rgba(10,20,40,0.06);
}
.conaier .container{padding-left:24px;padding-right:24px}
.intro-grid{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.intro-text{flex:1;min-width:260px}
.conaier h2{color:#fff;margin-top:0;text-shadow:0 2px 10px rgba(0,0,0,0.35)}
.conaier p{color:rgba(255,255,255,0.95);text-shadow:0 2px 10px rgba(0,0,0,0.28)}

/* ----------------- Leistungen (weißer Container) ----------------- */
.card{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.services.card{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:20px}
.service{padding:14px;border-radius:8px;background:#fff;border:1px solid rgba(11,99,166,0.04)}
.service h3{margin:0 0 8px;font-size:18px;color:var(--brand-blue)}
.service p{margin:0;color:#111}

/* Kontakt / weitere Sektionen */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:12px}
.contact-list p{margin:8px 0}
footer{margin-top:28px;padding:18px 0;color:var(--muted);font-size:13px;text-align:center}

/* Utilities */
.muted{color:var(--muted)}
.small{font-size:13px}
.anchor{scroll-margin-top:90px}

/* Responsive */
@media (max-width:880px){
  .header-inner{padding:12px 0}
  .logo img{height:40px}
  .hero{height:52vh;min-height:320px}
  .hero-content{padding:18px}
  .intro-grid{flex-direction:column}
  .contact-grid{grid-template-columns:1fr}
  .services.card{grid-template-columns:1fr}
  .conaier{padding:24px 0}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-bg.animate{animation:none !important;transition:none !important;transform:none !important}
  .hero:hover .hero-bg{transform:none !important}
}
/* ----------------- Footer (full width gradient) ----------------- */
.site-footer{width:100%;margin-top:2px}
.footer-panel{
  background-image: radial-gradient(circle farthest-corner at 67% 50%, #4fa3ff 10%, #1a3d7c 69%);
  color:#ffffff;
  padding:5px 0;
  box-shadow: 0 -6px 24px rgba(10,20,40,0.06);
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-left:24px;
  padding-right:24px;
}
.footer-contact{max-width:520px}
.footer-brand{font-weight:700;margin-bottom:8px}
.footer-contacts{display:flex;flex-direction:column;gap:8px}
.footer-item{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600}
.footer-item svg{opacity:0.95}
.footer-item span{display:inline-block}

/* Linkbereich */
.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.footer-links ul{list-style:none;padding:0;margin:0;display:flex;gap:18px}
.footer-links a{color:#ffffff;text-decoration:none;font-weight:600}
.footer-copy{color:rgba(255,255,255,0.9);font-size:13px;margin-top:6px}

/* Responsive */
@media (max-width:880px){
  .header-inner{padding:12px 0}
  .logo img{height:40px}
  .hero{height:52vh;min-height:320px}
  .hero-content{padding:18px}
  .intro-grid{flex-direction:column}
  .contact-grid{grid-template-columns:1fr}
  .services.card{grid-template-columns:1fr}
  .conaier{padding:24px 0}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-links{align-items:flex-start}
  .footer-links ul{flex-wrap:wrap;gap:12px}
}

/* Accessibility: focus states */
.footer-contacts a:focus,
.footer-links a:focus,
.btn:focus{
  outline:3px solid rgba(255,255,255,0.18);
  outline-offset:3px;
  border-radius:6px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-bg.animate{animation:none !important;transition:none !important;transform:none !important}
  .hero:hover .hero-bg{transform:none !important}
}