/* =========================================================
   Custom Redesign – Header (Kontaktleiste) & Hero
   Kammermeier Entsorgung & Entrümpelung
   ========================================================= */
:root{
  --navy:#0f3d66;        /* dunkles Blau der Kontaktleiste            */
  --blue:#16558e;        /* Markenblau (Logo / Button)               */
  --blue-dark:#114a7d;
  --green:#4a9b62;       /* Akzentgrün (Städte, Öffnungszeit, Subtext)*/
  --wa:#28ad5b;          /* WhatsApp-Grün (dezenter)                 */
  --wa-dark:#1f9450;
}

/* Hausschrift (Worksans) auf allen neuen Bausteinen erzwingen –
   body ist im Theme auf das nicht eingebundene "Karla" gesetzt und
   fiele sonst auf eine Serifenschrift zurück. */
.topbar, .topbar *,
.hero-grid, .hero-grid *{ font-family:Worksans, sans-serif; }

/* ---------- Navigation: fixed -> sticky ----------
   Das Theme nutzt position:fixed; dadurch schob sich der Inhalt unter das
   Menü (vor allem bei 2-zeiligem Menü auf Tablet). Sticky bleibt im Fluss,
   reserviert seinen Platz und bleibt beim Scrollen oben kleben. */
.navbar{ position:sticky !important; top:0; margin-left:0 !important; margin-right:0 !important; }
.section{ margin-top:24px; }   /* war 150px als Ausgleich fürs fixe Menü */

/* ---------- Obere Kontaktleiste ---------- */
.section-2{ background-color:var(--navy); }

.topbar{
  max-width:960px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.topbar-item{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff; flex:1 1 0; min-width:0;
}
.topbar-call{ justify-content:flex-end; }
.topbar-wa{ justify-content:flex-start; }
.topbar-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  border:2px solid #fff; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.topbar-icon-wa{ background:var(--wa); border-color:var(--wa); }
.topbar-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.topbar-label{ font-size:12px; font-weight:300; opacity:.9; }
.topbar-main{ font-size:20px; font-weight:600; letter-spacing:.2px; }
.topbar-hours{ font-size:12px; font-weight:600; color:var(--green); }
.topbar-divider{ width:1px; align-self:stretch; background:rgba(255,255,255,.25); margin:4px 0; }
.topbar-badge{
  flex:0 0 auto; background:var(--wa); color:#fff;
  font-size:12px; font-weight:700; line-height:1.15; text-align:center;
  padding:8px 12px; border-radius:8px; margin-left:6px;
}
.topbar-wa:hover .topbar-badge{ background:var(--wa-dark); }

/* ---------- Hero ---------- */
/* Sicherstellen, dass der Hero auch ohne Webflow-Animation sichtbar ist */
.content{ opacity:1 !important; }
.move-up{ opacity:1 !important; transform:none !important; }

.hero-section{
  min-height:720px;
  display:flex; align-items:center;     /* Inhalt vertikal mittig -> Luft oben & unten */
  background-image:linear-gradient(rgba(8,20,33,.85) 0%, rgba(8,20,33,.6) 50%, rgba(8,20,33,.9) 100%),
                   url('../images/Entrümpelung.jpeg');
  background-position:50% 50%;
  background-size:cover;
}
.hero-section .content-wrapper-wide{ width:100%; height:auto; padding-top:0; padding-bottom:0; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:40px; align-items:center;         /* Bullets rechts vertikal zentriert */
  padding:40px 0;
}
.hero-left{ min-width:0; }
.hero-eyebrow{
  color:var(--green); text-transform:uppercase; letter-spacing:.6px;
  font-weight:600; font-size:13px; margin-bottom:10px;
}
.hero-title{
  color:#fff; font-family:Worksans,sans-serif; font-weight:600;
  font-size:54px; line-height:1.08; margin:0;
}
.hero-title-2{ display:block; font-weight:600; }
.hero-rule{ display:block; width:70px; height:4px; background:var(--green); border-radius:2px; margin:22px 0; }
.hero-sub{ color:#e7edf3; font-size:19px; line-height:1.5; max-width:520px; margin:0 0 26px; }
.hero-sub .hl{ color:var(--green); font-weight:600; }

.hero-cta{ display:flex; flex-direction:column; gap:14px; max-width:520px; }
.hero-btn{
  display:flex; align-items:center; gap:14px;
  padding:15px 20px; border-radius:10px; text-decoration:none; color:#fff;
  transition:background-color .2s, transform .05s;
}
.hero-btn:active{ transform:translateY(1px); }
.hero-btn-wa{ background:var(--wa); }
.hero-btn-wa:hover{ background:var(--wa-dark); }
.hero-btn-cal{ background:var(--blue); }
.hero-btn-cal:hover{ background:var(--blue-dark); }
.hero-btn-ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.hero-btn-tx{ display:flex; flex-direction:column; line-height:1.2; }
.hero-btn-t{ font-size:16px; font-weight:600; }
.hero-btn-s{ font-size:13px; opacity:.9; }

.hero-right{ display:flex; flex-direction:column; }
.hero-feature{ display:flex; align-items:center; gap:14px; padding:16px 0; }
.hero-feature + .hero-feature{ border-top:1px solid rgba(255,255,255,.16); }
.hero-feature-ic{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.hero-feature-tx{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.hero-feature-t{ color:#fff; font-weight:600; font-size:16px; }
.hero-feature-s{ color:var(--green); font-size:14px; }

/* ---------- Responsive ---------- */
/* Tablet & Mobile: Hero einspaltig stapeln (2 Spalten sind hier zu eng) */
@media (max-width:991px){
  .hero-section{ min-height:auto; display:block; }
  .hero-grid{ grid-template-columns:1fr; gap:30px; padding:44px 0 52px; }
  .hero-title{ font-size:40px; }
}
@media (max-width:767px){
  .topbar{ gap:10px; padding:8px 10px; }
  .topbar-icon{ width:34px; height:34px; }
  .topbar-main{ font-size:16px; }
  .topbar-label{ display:none; }
  .topbar-hours{ font-size:11px; }
  .topbar-wa .topbar-text{ display:none; }   /* "Schreiben Sie uns / WhatsApp" mobil weglassen */
  .topbar-badge{ font-size:11px; padding:7px 10px; }

  .hero-grid{ gap:24px; padding:30px 0 42px; }
  .hero-title{ font-size:32px; }
  .hero-eyebrow{ font-size:12px; }
  .hero-rule{ margin:16px 0; }
  .hero-sub{ font-size:16px; margin-bottom:20px; }
  .hero-cta{ max-width:none; }
  .hero-btn-t{ font-size:15px; }
  .hero-feature-t{ font-size:15px; }
  .hero-feature-s{ font-size:13px; }
}
@media (max-width:479px){
  .hero-title{ font-size:27px; }
  .topbar-main{ font-size:15px; }
}