/*
Theme Name: DS Reinigung & Service
Theme URI: https://www.dsreinigung-service.de
Author: DS Reinigung & Service
Author URI: https://www.dsreinigung-service.de
Description: Professionelle Gebäudereinigung in Hannover Laatzen
Version: 3.0.0
License: Proprietary
Text Domain: ds-reinigung
*/

/* ══ RESET ══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter', 'DM Sans', sans-serif; background:#f8f9fa; color:#1a1a1a; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ══ VARIABLEN ══ */
:root {
  --green: #5cb800;
  --green-dark: #3d8000;
  --green-light: #7dd400;
  --green-glow: rgba(92,184,0,0.18);
  --black: #0d0d0d;
  --black-mid: #1c1c1c;
  --black-soft: #2a2a2a;
  --gray: #6b7280;
  --gray-light: #f3f4f6;
  --white: #ffffff;
  --shadow: 0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.18);
  --shadow-green: 0 8px 32px rgba(92,184,0,0.25);
}

/* ══ TOPBAR ══ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:74px;
  background:rgba(13,13,13,0.96);
  backdrop-filter:blur(20px);
  border-bottom:2px solid var(--green);
  transition:all 0.3s;
}
.topbar-logo { display:flex; align-items:center; }
.topbar-logo img { height:52px; width:auto; }
.topbar-nav { display:flex; align-items:center; gap:32px; }
.topbar-nav a {
  font-size:0.8rem; font-weight:600; letter-spacing:0.07em;
  text-transform:uppercase; color:rgba(255,255,255,0.65);
  transition:color 0.2s; position:relative;
}
.topbar-nav a:hover { color:var(--green); }
.topbar-cta {
  background:var(--green) !important; color:var(--black) !important;
  padding:11px 24px; border-radius:4px;
  font-weight:700 !important; font-size:0.8rem !important;
  letter-spacing:0.05em; text-transform:uppercase;
  transition:all 0.2s !important; display:flex; align-items:center; gap:6px;
  box-shadow:var(--shadow-green);
}
.topbar-cta:hover { background:var(--green-light) !important; transform:translateY(-1px); }

/* ══ HAMBURGER ══ */
.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; }
.ham span { display:block; width:24px; height:2px; background:var(--white); transition:all 0.3s; border-radius:2px; }
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ══ MOBILE MENU ══ */
.mob-menu {
  display:none; position:fixed; top:74px; left:0; right:0;
  background:var(--black); z-index:999;
  padding:24px 28px 32px;
  border-bottom:2px solid var(--green);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(-8px);
  transition:all 0.3s; pointer-events:none;
}
.mob-menu.open { opacity:1; transform:none; pointer-events:all; }
.mob-menu a {
  display:block; padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  font-size:1rem; font-weight:500; color:rgba(255,255,255,0.8);
}
.mob-menu a:hover { color:var(--green); }
.mob-cta {
  margin-top:20px; display:block !important;
  background:var(--green); color:var(--black) !important;
  text-align:center; padding:15px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  font-size:0.9rem; border-radius:4px; border:none !important;
}

/* ══ HERO ══ */
.hero {
  min-height:100vh; padding-top:74px;
  background:var(--black);
  display:grid; grid-template-columns:1fr 1fr;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(92,184,0,0.08) 0%, transparent 60%);
}
.hero-left {
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 56px 80px 80px; position:relative; z-index:1;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(92,184,0,0.12); border:1px solid rgba(92,184,0,0.3);
  padding:8px 16px; border-radius:100px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--green);
  margin-bottom:28px; width:fit-content;
}
.hero-badge::before { content:'📍'; font-size:0.85rem; }
.hero-h1 {
  font-size:clamp(2.6rem, 4.5vw, 4rem);
  font-weight:900; line-height:1.05; color:var(--white);
  margin-bottom:20px; letter-spacing:-0.02em;
}
.hero-h1 .accent { color:var(--green); display:block; }
.hero-sub {
  font-size:1.05rem; line-height:1.75; color:rgba(255,255,255,0.55);
  margin-bottom:40px; max-width:460px;
}
.hero-trust {
  display:flex; gap:20px; margin-bottom:44px; flex-wrap:wrap;
}
.hero-trust-item {
  display:flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.6);
}
.hero-trust-item::before { content:'✓'; color:var(--green); font-weight:900; font-size:0.9rem; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.btn-green {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:var(--black);
  padding:17px 34px; font-size:0.88rem; font-weight:800;
  letter-spacing:0.05em; text-transform:uppercase;
  border-radius:4px; transition:all 0.25s;
  box-shadow:var(--shadow-green);
}
.btn-green:hover { background:var(--green-light); transform:translateY(-2px); box-shadow:0 12px 36px rgba(92,184,0,0.4); }
.btn-outline-white {
  display:inline-flex; align-items:center; gap:10px;
  border:2px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.85);
  padding:15px 32px; font-size:0.88rem; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase;
  border-radius:4px; transition:all 0.25s;
}
.btn-outline-white:hover { border-color:var(--green); color:var(--green); }

.hero-right {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-right img { width:100%; height:100%; object-fit:cover; opacity:0.75; }
.hero-right::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--black) 0%, transparent 30%),
             linear-gradient(0deg, var(--black) 0%, transparent 20%);
}
.hero-stats {
  position:absolute; bottom:40px; left:40px; z-index:2;
  display:flex; gap:32px;
}
.hero-stat { text-align:left; }
.hero-stat-num { font-size:2rem; font-weight:900; color:var(--green); line-height:1; }
.hero-stat-label { font-size:0.72rem; color:rgba(255,255,255,0.45); font-weight:500; margin-top:2px; letter-spacing:0.04em; text-transform:uppercase; }

/* ══ INNER WRAPPER ══ */
.inner { max-width:1200px; margin:0 auto; }
.section-pad { padding:88px 80px; }

/* ══ SECTION HEADERS ══ */
.s-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.7rem; font-weight:800; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--green); margin-bottom:14px;
}
.s-tag::before { content:''; width:20px; height:2px; background:var(--green); border-radius:2px; }
.s-title {
  font-size:clamp(2rem, 3vw, 2.8rem); font-weight:800;
  line-height:1.1; color:var(--black); margin-bottom:16px;
  letter-spacing:-0.02em;
}
.s-title .g { color:var(--green); }
.s-title-white { color:var(--white); }
.s-sub { font-size:1rem; line-height:1.75; color:var(--gray); max-width:560px; margin-bottom:52px; }
.s-sub-white { color:rgba(255,255,255,0.5); }

/* ══ LEISTUNGEN ══ */
#leistungen { background:var(--white); }
.leistungen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; background:#e5e7eb; }
.leistung-card {
  background:var(--white); padding:36px 32px;
  transition:all 0.3s; cursor:default; position:relative; overflow:hidden;
}
.leistung-card::after {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:3px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform 0.3s;
}
.leistung-card:hover { background:#f0fdf4; transform:translateY(-3px); box-shadow:var(--shadow-lg); z-index:1; }
.leistung-card:hover::after { transform:scaleX(1); }
.l-icon {
  width:56px; height:56px; background:#f0fdf4; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:20px;
  border:1px solid rgba(92,184,0,0.2);
}
.l-title { font-size:1.05rem; font-weight:700; color:var(--black); margin-bottom:10px; }
.l-text { font-size:0.88rem; line-height:1.7; color:var(--gray); }

/* ══ ÜBER UNS ══ */
#ueber { background:var(--gray-light); }
.ueber-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.ueber-img {
  position:relative;
}
.ueber-img img { width:100%; border-radius:8px; box-shadow:var(--shadow-lg); }
.ueber-img-badge {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--green); color:var(--black);
  padding:24px 28px; border-radius:8px;
  box-shadow:var(--shadow-green); text-align:center;
}
.ueber-img-badge-num { font-size:2.2rem; font-weight:900; line-height:1; }
.ueber-img-badge-label { font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; opacity:0.85; }
.checks { display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.check { display:flex; align-items:flex-start; gap:14px; }
.check-dot {
  width:24px; height:24px; background:var(--green); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--black); font-size:0.7rem; font-weight:900; flex-shrink:0; margin-top:2px;
}
.check-title { font-size:0.95rem; font-weight:700; color:var(--black); margin-bottom:2px; }
.check-text { font-size:0.85rem; color:var(--gray); line-height:1.5; }
.stat-bar { display:flex; gap:0; border-top:2px solid #e5e7eb; padding-top:32px; }
.sb { flex:1; padding-right:20px; border-right:2px solid #e5e7eb; margin-right:20px; }
.sb:last-child { border:none; margin:0; padding:0; }
.sb-num { font-size:2rem; font-weight:900; color:var(--green); line-height:1; }
.sb-label { font-size:0.75rem; color:var(--gray); font-weight:500; margin-top:3px; }

/* ══ WARUM ══ */
#warum { background:var(--black); }
.warum-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:52px; }
.warum-card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  padding:32px 28px; border-radius:8px;
  transition:all 0.3s;
}
.warum-card:hover { background:rgba(92,184,0,0.07); border-color:rgba(92,184,0,0.3); transform:translateY(-4px); }
.w-num { font-size:3rem; font-weight:900; color:rgba(92,184,0,0.2); line-height:1; margin-bottom:4px; }
.w-title { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:10px; }
.w-text { font-size:0.85rem; line-height:1.7; color:rgba(255,255,255,0.45); }

/* ══ GEBIET ══ */
#gebiet { background:var(--white); }
.gebiet-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.gebiet-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.g-tag {
  padding:8px 16px; background:#f0fdf4; border:1px solid rgba(92,184,0,0.3);
  font-size:0.82rem; font-weight:600; color:var(--green-dark); border-radius:100px;
  transition:all 0.2s;
}
.g-tag:hover { background:var(--green); color:var(--black); }
.gebiet-box {
  background:var(--black); padding:44px; border-radius:8px;
  border:1px solid rgba(92,184,0,0.2);
}
.gebiet-box-title { font-size:1.4rem; font-weight:800; color:var(--white); margin-bottom:12px; }
.gebiet-box-sub { font-size:0.88rem; color:rgba(255,255,255,0.5); line-height:1.7; margin-bottom:28px; }
.hours { margin-bottom:28px; }
.hour-row { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:0.86rem; }
.hour-day { color:rgba(255,255,255,0.45); }
.hour-time { color:var(--green); font-weight:700; }
.btn-green-full { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px; background:var(--green); color:var(--black); font-weight:800; font-size:0.88rem; letter-spacing:0.05em; text-transform:uppercase; border-radius:4px; margin-bottom:10px; transition:all 0.2s; }
.btn-green-full:hover { background:var(--green-light); }
.btn-outline-green { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; border:2px solid rgba(92,184,0,0.4); color:var(--green); font-weight:700; font-size:0.85rem; border-radius:4px; transition:all 0.2s; }
.btn-outline-green:hover { border-color:var(--green); background:rgba(92,184,0,0.06); }

/* ══ KONTAKT ══ */
.kontakt-section { background:var(--gray-light); padding:88px 80px; }
.kontakt-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.k-cards { display:flex; flex-direction:column; gap:14px; }
.k-card {
  display:flex; align-items:center; gap:18px;
  background:var(--white); padding:22px 26px;
  border-radius:8px; border-left:4px solid var(--green);
  box-shadow:var(--shadow); transition:all 0.25s;
}
.k-card:hover { transform:translateX(4px); box-shadow:var(--shadow-lg); }
.k-icon {
  width:46px; height:46px; background:#f0fdf4; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;
}
.k-label { font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray); }
.k-value { font-size:1rem; font-weight:700; color:var(--black); margin-top:2px; }
.k-form { background:var(--white); padding:44px; border-radius:8px; box-shadow:var(--shadow); }
.k-form-title { font-size:1.6rem; font-weight:800; color:var(--black); margin-bottom:28px; }
.f-group { margin-bottom:18px; }
.f-group label { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray); margin-bottom:6px; }
.f-group input, .f-group textarea, .f-group select {
  width:100%; padding:13px 14px;
  border:2px solid #e5e7eb; background:var(--gray-light);
  font-family:inherit; font-size:0.9rem; color:var(--black);
  outline:none; border-radius:6px; transition:border-color 0.2s;
  -webkit-appearance:none;
}
.f-group input:focus, .f-group textarea:focus, .f-group select:focus { border-color:var(--green); background:var(--white); }
.f-group textarea { resize:vertical; min-height:110px; }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.btn-submit {
  width:100%; padding:16px; background:var(--green); color:var(--black);
  border:none; font-family:inherit; font-size:0.88rem; font-weight:800;
  letter-spacing:0.07em; text-transform:uppercase; cursor:pointer;
  border-radius:6px; transition:all 0.25s; box-shadow:var(--shadow-green);
}
.btn-submit:hover { background:var(--green-light); transform:translateY(-2px); }

/* ══ CTA BANNER ══ */
.cta-banner {
  background:var(--green); padding:64px 80px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.cta-banner-title { font-size:clamp(1.6rem, 2.5vw, 2.2rem); font-weight:900; color:var(--black); line-height:1.15; }
.cta-banner-sub { font-size:0.95rem; color:rgba(0,0,0,0.6); margin-top:6px; }
.btn-black { display:inline-flex; align-items:center; gap:10px; background:var(--black); color:var(--white); padding:17px 36px; font-size:0.88rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; border-radius:4px; transition:all 0.2s; white-space:nowrap; }
.btn-black:hover { background:var(--black-soft); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.35); }

/* ══ FOOTER ══ */
footer { background:var(--black); padding:60px 80px 36px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:72px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:36px; }
.f-logo img { height:56px; margin-bottom:16px; }
.f-desc { font-size:0.86rem; line-height:1.75; color:rgba(255,255,255,0.4); max-width:280px; margin-bottom:20px; }
.f-contacts { display:flex; flex-direction:column; gap:10px; }
.f-contact { font-size:0.85rem; color:rgba(255,255,255,0.45); display:flex; align-items:center; gap:8px; }
.f-contact a { color:inherit; transition:color 0.2s; }
.f-contact a:hover { color:var(--green); }
.f-contact-email a { color:var(--green) !important; }
.f-col-title { font-size:0.7rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--green); margin-bottom:18px; }
.f-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.f-links a { font-size:0.86rem; color:rgba(255,255,255,0.4); transition:color 0.2s; }
.f-links a:hover { color:var(--green); }
.f-hours-list { display:flex; flex-direction:column; gap:7px; }
.f-hour { font-size:0.82rem; color:rgba(255,255,255,0.4); display:flex; justify-content:space-between; }
.f-hour span:last-child { color:var(--green); font-weight:600; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:rgba(255,255,255,0.25); flex-wrap:wrap; gap:12px; }
.footer-bottom a { color:rgba(255,255,255,0.25); transition:color 0.2s; }
.footer-bottom a:hover { color:var(--green); }

/* ══ WHATSAPP FAB ══ */
.wa-fab {
  position:fixed; bottom:28px; right:28px; z-index:998;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.45); transition:all 0.25s;
}
.wa-fab svg { width:30px; height:30px; fill:white; }
.wa-fab:hover { transform:scale(1.1) translateY(-3px); box-shadow:0 10px 30px rgba(37,211,102,0.55); }

/* ══ REVEAL ══ */
.reveal { opacity:0; transform:translateY(24px); transition:all 0.65s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity:1; transform:none; }
.rd1 { transition-delay:0.08s; } .rd2 { transition-delay:0.16s; } .rd3 { transition-delay:0.24s; }
.rd4 { transition-delay:0.32s; } .rd5 { transition-delay:0.40s; }

/* ══ RESPONSIVE ══ */
@media (max-width:1024px) {
  .topbar { padding:0 32px; }
  .hero { grid-template-columns:1fr; }
  .hero-right { display:none; }
  .hero-left { padding:80px 40px; min-height:100vh; }
  .ueber-grid, .gebiet-grid, .kontakt-grid { grid-template-columns:1fr; }
  .leistungen-grid { grid-template-columns:repeat(2,1fr); }
  .warum-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .section-pad, .kontakt-section { padding:72px 40px; }
  .cta-banner { padding:56px 40px; }
  footer { padding:56px 40px 32px; }
}
@media (max-width:768px) {
  .topbar { padding:0 20px; }
  .topbar-nav { display:none; }
  .ham { display:flex; }
  .mob-menu { display:block; }
  .hero-left { padding:72px 24px 56px; }
  .hero-btns, .cta-banner { flex-direction:column; align-items:flex-start; }
  .leistungen-grid, .warum-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:36px; }
  .f-row { grid-template-columns:1fr; }
  .section-pad, .kontakt-section { padding:56px 20px; }
  .cta-banner { padding:48px 20px; }
  footer { padding:48px 20px 28px; }
  .footer-bottom { flex-direction:column; text-align:center; }
}