/* Hintergrundbilder – immer mit Verlauf darüber, damit Text lesbar bleibt */

/* Stichtag-Band: Zähler-Nahaufnahme, dunkel und leicht unscharf */
.deadline::before {
  content: ""; position: absolute; inset: -20px; z-index: 0; pointer-events: none;
  background: url("../img/wasserzaehler-nah.webp") center 40% / cover no-repeat;
  filter: blur(3px) grayscale(.3); opacity: .22;
  transform: translateY(var(--par, 0px)) scale(1.1);
}

/* Termin-Abschnitt: Unterputz-Wasserzähler, nach links ausgeblendet */
#termin { position: relative; overflow: hidden; }
#termin::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(244,245,247,.8) 30%, rgba(244,245,247,.35) 100%),
    url("../img/treppenhaus-altbau.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
#termin > .wrap { position: relative; }

/* Partner-Abschnitt: Abrechnung am Laptop, sehr zurückhaltend */
.audience {
  background:
    linear-gradient(180deg, rgba(233,235,239,.97), rgba(233,235,239,.94)),
    url("../img/abrechnung-laptop.webp") center / cover no-repeat;
}

/* Kontakt: Rauchwarnmelder mit rotem Licht, stark abgedunkelt */
.contact {
  background:
    linear-gradient(180deg, rgba(15,16,18,.93) 0%, rgba(15,16,18,.86) 50%, rgba(15,16,18,.95) 100%),
    url("../img/rauchwarnmelder.webp") center 30% / cover no-repeat fixed;
}

@media (max-width: 960px) {
  #termin::before { width: 100%; background:
    linear-gradient(180deg, rgba(244,245,247,.94), rgba(244,245,247,.86)),
    url("../img/treppenhaus-altbau.webp") center / cover no-repeat; }
  .contact { background-attachment: scroll; }
}

/* Wärmemengenzähler-Karte: Foto hinter dunklem Verlauf */
.card--heat {
  background:
    linear-gradient(180deg, rgba(15,16,18,.78) 0%, rgba(15,16,18,.9) 55%, rgba(15,16,18,.97) 100%),
    url("../img/waermemengenzaehler.webp") center 30% / cover no-repeat;
}

/* Lesbarkeit über dem Treppenhaus-Foto */
#termin .section-head > p { background: rgba(244,245,247,.86); padding: 1.1rem 1.3rem; border-radius: var(--r-md); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#termin .step { background: rgba(244,245,247,.78); border-radius: var(--r-md); padding: 1rem 1.2rem 1.2rem; margin-right: .6rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 960px) { #termin .step { margin-right: 0; } }

/* FAQ: Foto unter der Einleitung */
.faq-photo { margin: 2rem 0 0; position: relative; }
.faq-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lift); transform: rotate(-1.5deg); transition: transform .6s var(--ease); }
.faq-photo:hover img { transform: rotate(0) scale(1.02); }
.faq-photo figcaption { margin-top: 1rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; color: var(--ink-3); }
@media (max-width: 960px) { .faq-photo { max-width: 520px; } }

/* ---------- Karriere / Monteure gesucht ---------- */
.jobs { background: var(--red); color: #fff; position: relative; overflow: hidden; }
.jobs::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 15% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 15% 40%, #000, transparent 75%); }
.jobs .wrap { position: relative; }
.jobs__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.jobs__grid > * { min-width: 0; }
.jobs .eyebrow { color: rgba(255,255,255,.85); }
.jobs .eyebrow::before { background: #fff; }
.jobs h2 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); margin-top: 1rem; color: #fff; }
.jobs__intro > p { margin-top: 1.3rem; font-size: var(--text-lead); color: rgba(255,255,255,.9); max-width: 32rem; }
.jobs__intro .btn { margin-top: 2rem; }
.jobs__intro .btn:hover { background: var(--ink); color: #fff; }
.jobs__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.jobs__mwd { margin-top: .9rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.job-card { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: 1.5rem 1.7rem; box-shadow: 0 24px 50px -30px rgba(60,0,4,.7); transition: transform .5s var(--ease); }
.job-card:nth-child(even) { margin-top: 2.2rem; }
.job-card:hover { transform: translateY(-4px); }
.job-card__k { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); }
.job-card h3 { font-size: 1.45rem; letter-spacing: -.025em; margin-top: .45rem; }
.job-card p { margin-top: .5rem; color: #4a4a4f; font-size: .96rem; }
.check__opt { display: flex; gap: .7rem; align-items: center; cursor: pointer; font-size: .95rem; color: #d0d4db; }
.check__opt input { width: 20px; height: 20px; accent-color: var(--red); flex: none; }
.check__opt i { color: var(--red); font-style: normal; }
@media (max-width: 960px) {
  .jobs__grid { grid-template-columns: 1fr; }
  .job-card:nth-child(even) { margin-top: 0; }
}

.opt-msg { display: none; }
.form.is-bewerbung .opt-msg { display: inline; }
.form.is-bewerbung .req-msg { display: none; }
.jobs__intro > p, .jobs .eyebrow { color: #fff; }

@media (max-width: 640px) { .jobs__cards { grid-template-columns: minmax(0, 1fr); } }
.job-card { min-width: 0; }