/* Start custom CSS for html, class: .elementor-element-95bf252 *//* ====== Farbschema (Rot/Weiß) & Basis ====== */
:root{
  --brand:#c71f2d;        /* Primär-Rot: bei Bedarf anpassen (#d32f2f, #cc2b2b, …) */
  --ink:#0b1220;          /* Haupttext */
  --muted:#3f4755;        /* Sekundärtext */
  --bg:#ffffff;
  --card:#faf7f7;         /* leicht rötlich-hell für Cards */
  --line:#efe6e6;         /* feine Linien in warmem Grau */
  --radius:14px;
  --shadow:0 8px 24px rgba(12,12,12,.06);
}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{line-height:1.22}
p,li,small{line-height:1.7;font-size:17px}
a{text-decoration:none}

/* ====== Buttons (rot, Schrift weiß) ====== */
.btn-primary,.btn-outline{
  display:inline-block; padding:12px 18px; border-radius:999px;
  transition:.2s; font-weight:600;
}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{border:1px solid var(--line); color:var(--brand); background:#fff}
.btn-outline:hover{background:rgba(199,31,45,.06); border-color:var(--brand); color:var(--brand)}

/* ====== Hero ====== */
.jobs-hero{background:linear-gradient(180deg,#fff5f6,#ffffff); padding:72px 0; text-align:center}
.jobs-hero h1{margin:0 0 10px; font-size:clamp(34px,5vw,48px); color:var(--ink)}
.jobs-hero p{margin:0 0 18px; color:var(--muted)}

/* ====== Intro (Benefits) ====== */
.jobs-intro{margin:28px 0}
.intro-cards h2{margin:0 0 14px; color:var(--ink); font-size:clamp(22px,3.2vw,28px)}
.benefit-grid{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:800px){ .benefit-grid{ grid-template-columns:repeat(3,1fr) } }
.benefit-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; box-shadow:var(--shadow);
}
.benefit-card h3{margin:0 0 6px; font-size:19px; color:var(--ink)}
.benefit-card p{margin:0; color:var(--muted)}

/* ====== Jobkarten ====== */
.job-grid{display:grid; gap:22px; margin:28px 0}
@media (min-width:900px){ .job-grid{ grid-template-columns:1fr 1fr } }
.job-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); color:var(--ink)
}
.job-head{display:flex; flex-direction:column; gap:8px; margin-bottom:8px}
.job-card h3{margin:0; font-size:26px; color:var(--ink)}
.job-meta{display:flex; gap:8px; flex-wrap:wrap}

/* Badges in rötlich */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#fff1f2; color:#7a0f17; font-size:13px; border:1px solid #ffd5d8;
}
.badge-alt{
  background:#fff7f0; color:#7a3d0f; border-color:#ffe2c7;
}

.job-intro{margin:8px 0 16px; color:var(--muted)}
.job-body h4{margin:18px 0 6px; font-size:19px; color:var(--ink)}
.job-list{margin:0 0 0 18px}
.job-list li{margin:6px 0}

/* ====== Prozess + Bewerben ====== */
.jobs-flow{margin:32px 0}
.flow-grid{display:grid; gap:20px; grid-template-columns:1fr}
@media (min-width:900px){ .flow-grid{ grid-template-columns:1fr 1fr } }
.flow-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); color:var(--ink)
}
.flow-card h3{margin:0 0 10px; color:var(--ink); font-size:clamp(20px,2.4vw,24px)}

/* Schritte */
.steps{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
.steps li{display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.step-dot{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff1f2; color:#7a0f17; font-weight:700; border:1px solid #ffd5d8;
}

/* Bewerben */
#bewerben p{margin:0 0 12px; color:var(--muted)}
#bewerben .mail{margin:8px 0 12px}
.hint-list{margin:10px 0 0 18px; color:var(--muted)}
.hint-list li{margin:6px 0}

/* Mobile Buttons full width */
@media (max-width:420px){
  .btn-primary,.btn-outline{display:block; width:100%; text-align:center}
}/* End custom CSS */