/* ── Situationen ────────────────────────────────────── */
.situation-card {
  background: #2d3436;
  border: 1px solid rgba(2,177,236,.15);
  border-radius: 16px;
  padding: 1.6rem 1.4rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  height: 100%;
}
.situation-card:hover {
  border-color: #02b1ec;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(2,177,236,.18);
}
.situation-icon {
  font-size: 2rem;
  margin-bottom: .8rem;
  display: block;
  color: #02b1ec;
}
.situation-card h3 {
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem;
}
.situation-card p {
  font-size: .84rem;
  line-height: 1.7;
  color: rgba(255,255,255,.52);
  margin: 0;
}

/* ── Zahlen ─────────────────────────────────────────── */
.zahlen-sec {
  background: #02b1ec;
}
.zahl-item {
  text-align: center;
  padding: 1rem;
}
.zahl-val {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  display: block;
}
.zahl-lbl {
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .3rem;
  display: block;
}
.zahl-divider {
  width: 1px;
  background: rgba(255,255,255,.25);
  align-self: stretch;
}

/* ── Before/After Slider ────────────────────────────── */
.ba-slider {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: col-resize;
  user-select: none;
  border: 1px solid rgba(255,255,255,.1);
}
.ba-after, .ba-before {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.ba-after { z-index: 1; }
.ba-before { z-index: 2; clip-path: inset(0 50% 0 0); }
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  cursor: col-resize;
}
.ba-handle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  font-size: .6rem;
  font-weight: 700;
  color: #2d3436;
  letter-spacing: -.05em;
  pointer-events: none;
}
.ba-label {
  position: absolute;
  bottom: 12px;
  z-index: 4;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: 20px;
}
.ba-label-before { left: 12px; background: rgba(0,0,0,.6); color: rgba(255,255,255,.85); }
.ba-label-after  { right: 12px; background: #02b1ec; color: #fff; }
.ba-caption { text-align: center; margin-top: .75rem; font-size: .8rem; color: rgba(255,255,255,.4); }

/* placeholder gradients – replace with real photos via background-image */
.ba-raeumung-vor  { background: linear-gradient(135deg,#2a1a1a 0%,#3d2a2a 100%); }
.ba-raeumung-nach { background: linear-gradient(135deg,#1a2a24 0%,#2a3d34 100%); }
.ba-reinigung-vor  { background: linear-gradient(135deg,#1e1e1e 0%,#2d2d2d 100%); }
.ba-reinigung-nach { background: linear-gradient(135deg,#1a2820 0%,#2a3d30 100%); }
.ba-placeholder-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .4rem; color: rgba(255,255,255,.25);
  font-size: .75rem; text-align: center; pointer-events: none; z-index: 1;
}

/* ── Karriere ───────────────────────────────────────── */
.job-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s;
}
.job-card:hover { border-color: rgba(2,177,236,.4); }
.job-card.open  { border-color: #02b1ec; }
.job-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.5rem;
  gap: 1rem;
}
.job-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.job-meta  { font-size: .78rem; color: rgba(255,255,255,.38); }
.job-arrow { color: #02b1ec; font-size: 1rem; transition: transform .3s; flex-shrink: 0; }
.job-card.open .job-arrow { transform: rotate(180deg); }
.job-body {
  display: none;
  padding: 0 1.5rem 1.5rem;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(255,255,255,.5);
}
.job-card.open .job-body { display: block; }

/* ── Reveal animations ──────────────────────────────── */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity: 1; transform: none; }
.rvg > * { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.rvg.in > *:nth-child(1) { opacity:1;transform:none;transition-delay:0s }
.rvg.in > *:nth-child(2) { opacity:1;transform:none;transition-delay:.08s }
.rvg.in > *:nth-child(3) { opacity:1;transform:none;transition-delay:.16s }
.rvg.in > *:nth-child(4) { opacity:1;transform:none;transition-delay:.24s }
.rvg.in > *:nth-child(5) { opacity:1;transform:none;transition-delay:.32s }
.rvg.in > *:nth-child(6) { opacity:1;transform:none;transition-delay:.40s }

/* ── CTA Wizard ─────────────────────────────────────── */
#cta-wizard { background:#fff; }
.wz-dot {
  width:12px; height:12px; border-radius:50%;
  background:#dee2e6; flex-shrink:0; transition:background .2s;
}
.wz-dot.active  { background:#02b1ec; }
.wz-dot.current { background:#02b1ec; box-shadow:0 0 0 3px rgba(2,177,236,.25); }
.wz-dot.done    { background:#02b1ec; }
.wz-dot-line { flex:1; height:2px; background:#dee2e6; }

/* Service-Auswahl */
.wz-svc-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.wz-svc-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; border:2px solid #dee2e6; border-radius:12px;
  background:#fff; cursor:pointer; font-size:.8rem; font-weight:500;
  color:#495057; transition:all .15s; text-align:center; line-height:1.3;
}
.wz-svc-btn span { font-size:1.4rem; }
.wz-svc-btn:hover { border-color:#02b1ec; background:#f0fafe; color:#02b1ec; }
.wz-svc-btn.active { border-color:#02b1ec; background:#e8f8fd; color:#02b1ec; font-weight:700; }

/* Objekt-Auswahl in Schritt 2 */
.wz-obj-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.wz-obj-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px; border:2px solid #dee2e6; border-radius:10px;
  background:#fff; cursor:pointer; font-size:1.15rem; transition:all .15s;
}
.wz-obj-btn span { font-size:.72rem; font-weight:500; color:#6c757d; line-height:1.2; }
.wz-obj-btn:hover { border-color:#02b1ec; background:#f0fafe; }
.wz-obj-btn.active { border-color:#02b1ec; background:#e8f8fd; }

/* Füllgrad-Buttons */
.wz-fuell-btn {
  padding:8px 6px; border:2px solid #dee2e6; border-radius:10px;
  background:#fff; cursor:pointer; font-size:.8rem; font-weight:500;
  transition:all .15s; text-align:center;
}
.wz-fuell-btn:hover { border-color:#02b1ec; background:#f0fafe; }
.wz-fuell-btn.active { border-color:#02b1ec; background:#e8f8fd; font-weight:700; }

/* ── Offcanvas Raumwähler ────────────────────────────── */
.oc-raumwaehler { border:1px solid #dee2e6; border-radius:10px; overflow:hidden; }
.oc-raum-row { display:flex; align-items:center; padding:9px 12px; border-bottom:1px solid #f0f0f0; transition:background .15s; }
.oc-raum-row:last-child { border-bottom:none; }
.oc-raum-row.has-value { background:#f0fafe; }
.oc-raum-icon { font-size:1.1rem; width:28px; flex-shrink:0; }
.oc-raum-label { flex:1; font-size:.88rem; font-weight:500; }
.oc-raum-stepper { display:flex; align-items:center; }
.oc-stepper-btn { width:30px; height:30px; border:1.5px solid #ced4da; background:#fff; font-size:1.1rem; line-height:1; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.oc-stepper-btn.minus { border-radius:7px 0 0 7px; }
.oc-stepper-btn.plus  { border-radius:0 7px 7px 0; border-left:none; }
.oc-stepper-btn:hover { background:#e8f8fd; border-color:#02b1ec; color:#02b1ec; }
.oc-stepper-val { min-width:28px; text-align:center; font-size:.95rem; font-weight:600; border:1.5px solid #ced4da; border-left:none; border-right:none; padding:4px 2px; line-height:1.6; }
/* Objekttyp */
.oc-objekt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
.oc-objekt-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:7px 4px; border:2px solid #dee2e6; border-radius:9px; background:#fff; cursor:pointer; font-size:.72rem; font-weight:500; color:#495057; transition:all .15s; text-align:center; line-height:1.2; }
.oc-objekt-btn .obj-icon { font-size:1.2rem; }
.oc-objekt-btn:hover { border-color:#02b1ec; background:#f0fafe; color:#02b1ec; }
.oc-objekt-btn.active { border-color:#02b1ec; background:#e8f8fd; color:#02b1ec; font-weight:700; }