/*
 * HOMEOFJOBS - Gestaltungsvorlage der Unternehmensseite (.mhlp)
 * Woertlich aus dem CMS-Block von /seite/fuer-unternehmen, ergaenzt um die Bausteine
 * der Rechner-Seiten. Eine Quelle fuer alle Kundenseiten: Landingpages binden sie ueber
 * includes/hoj_vorlage_css.php ein, CMS-Bloecke per <link rel="stylesheet">.
 * Developed by Toni Sciacca - mail@tonisciacca.com
 */
/* ---- Gestaltung wörtlich aus der Unternehmensseite (/seite/fuer-unternehmen, CMS-Block) ---- */

.mhlp{--o:#f6a200;--o2:#e59500;--ink:#0f172a;--mut:#64748b;--soft:#f8fafc;--bd:#e9edf3;
  width:100%;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:#0f172a;line-height:1.6;background:#fff;color-scheme:light;font-style:normal;}
.mhlp *{box-sizing:border-box;}
.mhlp, .mhlp h1, .mhlp h2, .mhlp h3, .mhlp h4, .mhlp p, .mhlp li, .mhlp span, .mhlp a, .mhlp div, .mhlp em, .mhlp button{font-style:normal;}
.mhlp h1,.mhlp h2,.mhlp h3,.mhlp h4{color:#0f172a;}
.mhlp p,.mhlp li{color:#334155;}
.mhlp .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.mhlp .eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#b45309;}
.mhlp .eyebrow b{color:var(--o);font-weight:800;}
.mhlp .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.96rem;padding:13px 24px;border-radius:13px;text-decoration:none;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s,background .15s;}
.mhlp .btn-primary{background:var(--o);color:#fff;box-shadow:0 12px 28px rgba(246,162,0,.32);}
.mhlp .btn-primary:hover{background:var(--o2);transform:translateY(-2px);}
.mhlp .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--bd);}
.mhlp .btn-ghost:hover{border-color:#cbd5e1;transform:translateY(-2px);}
/* Screenshot-Rahmen (Platzhalter, falls Bild noch fehlt) */
.mhlp .shot{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--bd);
  background:linear-gradient(135deg,#fff3df,#eef2f7);box-shadow:0 30px 70px rgba(15,23,42,.16);min-height:220px;}
.mhlp .shot::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#c9a15a;font-weight:700;font-size:.85rem;letter-spacing:.05em;z-index:0;}
.mhlp .shot img{position:relative;z-index:1;display:block;width:100%;height:auto;}

/* ---------- HERO SLIDESHOW ---------- */
/* Titel weg + volle Breite, ABER oben Platz fuer die fixe Kopfzeile lassen (sonst ueberlagert der Hero den Header und blockt dessen Klicks) */
.mhlp .cta::before, .mhlp .plan .badge, .mhlp .shot::after{pointer-events:none;}
/* Alle Buttons/Links ueber jede Deko-Ebene heben */
.mhlp .btn, .mhlp .videobadge, .mhlp .toggle button, .mhlp .dots button, .mhlp .hero-cta{position:relative;z-index:3;}
/* WICHTIG: Hero NICHT position:relative -> sonst ueberlagert der Hero die fixe Kopfzeile und blockt deren Klicks.
   Verlauf fuellt hinter dem Header (keine weisse Luecke); Inhalt sitzt via padding-top unter dem Header. */
.mhlp .hero{background:linear-gradient(120deg,#fff7ed 0%,#f6f8fb 55%,#eef2f7 100%);padding:92px 0 34px;}
.mhlp .slide{display:none;}
.mhlp .slide.on{display:block;animation:mhfade .5s ease;}
@keyframes mhfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mhlp .slide-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center;}
.mhlp .snum{font-size:.8rem;font-weight:800;color:var(--o);letter-spacing:.1em;}
.mhlp .hero h1{font-size:clamp(2.1rem,4.3vw,3.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:12px 0 14px;text-wrap:balance;}
.mhlp .hero .lead{font-size:1.12rem;color:var(--mut);max-width:520px;}
.mhlp .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.mhlp .dots{display:flex;gap:9px;justify-content:center;margin-top:30px;}
.mhlp .dots button{width:34px;height:5px;border-radius:99px;border:none;background:#e2c9a0;cursor:pointer;padding:0;transition:background .2s,width .2s;}
.mhlp .dots button.on{background:var(--o);width:52px;}
/* Erklaervideo-Badge + Lightbox */
.mhlp .videobadge{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--bd);
  border-radius:999px;padding:7px 16px 7px 8px;font-weight:700;font-size:.9rem;color:#0f172a;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 24px rgba(15,23,42,.1);transition:transform .15s,box-shadow .15s;}
.mhlp .videobadge:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(246,162,0,.28);}
.mhlp .videobadge .pi{width:30px;height:30px;border-radius:50%;background:var(--o);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mhlp .videobadge .tag{color:var(--o);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.mh-vmodal{display:none;position:fixed;inset:0;z-index:100000;background:rgba(8,12,20,.86);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:24px;}
.mh-vmodal.on{display:flex;}
.mh-vbox{position:relative;width:100%;max-width:960px;z-index:1;}
.mh-vframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.mh-vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.mh-vclose{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:none;background:#fff;color:#0f172a;font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;text-decoration:none;}

/* ---------- SECTION ---------- */
.mhlp .sec{padding:74px 0;}
.mhlp .sec.alt{background:var(--soft);}
.mhlp .sec-head{text-align:center;max-width:680px;margin:0 auto 44px;}
.mhlp .sec-head h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;margin:10px 0 10px;text-wrap:balance;}
.mhlp .sec-head p{color:var(--mut);font-size:1.05rem;margin:0 auto;}

/* ---------- 6 CARDS ---------- */
.mhlp .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.mhlp .card{background:#fff;border:1px solid var(--bd);border-radius:18px;padding:26px;box-shadow:0 16px 40px rgba(15,23,42,.05);transition:transform .18s,box-shadow .18s;}
.mhlp .card:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(15,23,42,.1);}
.mhlp .card .ic{width:50px;height:50px;border-radius:13px;background:rgba(246,162,0,.12);color:var(--o);display:flex;align-items:center;justify-content:center;margin-bottom:15px;}
.mhlp .card h3{font-size:1.08rem;font-weight:800;margin:0 0 7px;letter-spacing:-.01em;}
.mhlp .card p{color:var(--mut);font-size:.92rem;margin:0;}

/* ---------- SPLIT HIGHLIGHT ---------- */
.mhlp .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.mhlp .split.rev .txt{order:2;}
.mhlp .split h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.02em;margin:12px 0 12px;}
.mhlp .split p{color:var(--mut);font-size:1.02rem;}
.mhlp .steps{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px;}
.mhlp .steps li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:#334155;font-size:.98rem;}
.mhlp .steps .n{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:var(--o);color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;}

/* ---------- SHOWCASE 2-up ---------- */
.mhlp .showcase{display:grid;grid-template-columns:1fr 1fr;gap:22px;}

/* ---------- PRICING ---------- */
.mhlp .toggle{display:inline-flex;background:#eef2f7;border-radius:999px;padding:5px;margin:0 auto 36px;gap:4px;}
.mhlp .toggle button{border:none;background:none;font-weight:700;font-size:.88rem;color:var(--mut);padding:9px 20px;border-radius:999px;cursor:pointer;}
.mhlp .toggle button.on{background:#fff;color:var(--ink);box-shadow:0 3px 10px rgba(15,23,42,.1);}
.mhlp .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.mhlp .plan{position:relative;background:#fff;border:1px solid var(--bd);border-radius:22px;padding:30px 26px;display:flex;flex-direction:column;box-shadow:0 16px 40px rgba(15,23,42,.05);}
.mhlp .plan.pop{border:2px solid var(--o);box-shadow:0 26px 60px rgba(246,162,0,.2);}
.mhlp .plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--o);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap;}
.mhlp .plan .pname{font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);}
.mhlp .plan .amount{font-size:2.5rem;font-weight:800;letter-spacing:-.02em;margin:10px 0 2px;color:#0f172a;}
.mhlp .plan .per{color:var(--mut);font-size:.82rem;margin-bottom:18px;}
.mhlp .plan ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px;flex:1;}
.mhlp .plan li{display:flex;gap:10px;font-size:.9rem;color:#334155;}
.mhlp .plan li svg{flex-shrink:0;color:var(--o);margin-top:2px;}
.mhlp .plan .btn{width:100%;justify-content:center;}
.mhlp .py{display:none;}

/* ---------- CTA ---------- */
.mhlp .cta{position:relative;overflow:hidden;background:linear-gradient(120deg,#111827,#1f2937);color:#fff;border-radius:26px;padding:56px 40px;text-align:center;margin:74px auto;max-width:1180px;}
.mhlp .cta::before{content:"";position:absolute;top:-100px;right:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(246,162,0,.5),transparent 70%);}
.mhlp .cta h2{color:#fff;position:relative;z-index:1;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;}
.mhlp .cta p{color:rgba(255,255,255,.72);position:relative;z-index:1;max-width:560px;margin:12px auto 24px;}
.mhlp .cta .g{position:relative;z-index:1;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.mhlp .cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}

@media(max-width:900px){
  .mhlp .slide-grid,.mhlp .split,.mhlp .showcase{grid-template-columns:1fr;gap:30px;}
  .mhlp .split.rev .txt{order:0;}
  .mhlp .cards,.mhlp .price-grid{grid-template-columns:1fr;}
}

/* ---- Nur was der Check zusätzlich braucht, in derselben Sprache ---- */
.mhlp .frageblock{margin-bottom:22px;}
.mhlp .frageblock h3{font-size:1.15rem;font-weight:800;margin:0 0 3px;}
.mhlp .frageblock .sub{color:var(--mut);font-size:.9rem;margin:0 0 22px;}
.mhlp .f{margin-bottom:20px;}
.mhlp .f > label.q{display:block;font-size:.97rem;font-weight:700;color:#1e293b;margin-bottom:8px;}
.mhlp .f .hint{display:block;font-size:.83rem;color:var(--mut);margin:-4px 0 8px;}
.mhlp .feld{width:100%;padding:12px 14px;border:1.5px solid var(--bd);border-radius:13px;font-size:.95rem;box-sizing:border-box;font-family:inherit;background:#fff;color:#1e293b;}
.mhlp .feld:focus{border-color:var(--o);outline:none;box-shadow:0 0 0 3px rgba(246,162,0,.12);}
.mhlp .alter{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.mhlp .alter small{display:block;font-size:.78rem;color:var(--mut);margin-bottom:4px;}
.mhlp .ziele{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px;}
.mhlp .ziele label{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1.5px solid var(--bd);border-radius:13px;font-size:.92rem;color:#334155;cursor:pointer;background:#fff;}
.mhlp .ziele input{width:17px;height:17px;accent-color:var(--o);}
.mhlp .ziele label:has(input:checked){border-color:var(--o);background:#fff7ed;}
.mhlp .satz{background:linear-gradient(120deg,#111827,#1f2937);color:#fff;border-radius:22px;padding:34px 36px;font-size:clamp(1.05rem,2.1vw,1.4rem);line-height:1.5;margin-bottom:22px;}
.mhlp .satz b{color:#fbbf24;}
.mhlp .gross{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:22px;}
.mhlp .gross > div{background:#fff;border:1px solid var(--bd);border-radius:18px;padding:22px;text-align:center;box-shadow:0 16px 40px rgba(15,23,42,.05);}
.mhlp .gross strong{display:block;font-size:2.4rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:800;}
.mhlp .gross span{display:block;margin-top:8px;font-size:.85rem;color:var(--mut);line-height:1.45;}
.mhlp .gross > div.hl strong{color:#b45309;}
.mhlp .ampel{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:13px;margin-bottom:9px;font-size:.93rem;}
.mhlp .ampel b{min-width:180px;flex-shrink:0;}
.mhlp .jahre{display:flex;gap:9px;align-items:flex-end;height:120px;margin:28px 0 32px;}
.mhlp .jahre > div{flex:1;background:#fff7ed;border:1px solid #fcd899;border-radius:9px 9px 0 0;position:relative;min-height:5px;}
.mhlp .jahre span{position:absolute;top:-22px;left:0;right:0;text-align:center;font-size:.82rem;font-weight:800;color:#b45309;}
.mhlp .jahre small{position:absolute;bottom:-23px;left:0;right:0;text-align:center;font-size:.77rem;color:var(--mut);}
.mhlp .tabwrap{overflow-x:auto;}
.mhlp table.plan{width:100%;border-collapse:collapse;min-width:640px;}
.mhlp table.plan th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);padding:11px 12px;border-bottom:1px solid var(--bd);white-space:nowrap;}
.mhlp table.plan td{padding:13px 12px;border-bottom:1px solid var(--soft);font-size:.93rem;color:#334155;vertical-align:top;}
.mhlp .weg{display:inline-block;padding:4px 12px;border-radius:9999px;font-size:.78rem;font-weight:700;white-space:nowrap;}
.mhlp .w-ausbilden{background:#dcfce7;color:#14532d;}
.mhlp .w-qualifizieren{background:#dbeafe;color:#1e3a8a;}
.mhlp .w-einstellen,.mhlp .w-einstellen_frueh{background:#fff7ed;color:#b45309;}
.mhlp .w-ueberlassen{background:#fee2e2;color:#7f1d1d;}
.mhlp .spaet{color:#b91c1c;font-weight:700;white-space:nowrap;}
.mhlp .skill{display:inline-block;background:var(--soft);border:1px solid var(--bd);color:#475569;border-radius:8px;padding:4px 10px;font-size:.83rem;margin:3px 4px 3px 0;}
.mhlp .merk{display:flex;gap:11px;padding:15px 17px;background:#fff7ed;border:1px solid #fcd899;border-radius:13px;margin-bottom:10px;font-size:.94rem;color:#7c4a03;line-height:1.55;}
.mhlp .klein{font-size:.84rem;color:var(--mut);line-height:1.8;}
.mhlp .flash{padding:14px 18px;border-radius:13px;margin-bottom:18px;font-size:.95rem;font-weight:700;}
.mhlp .flash.success{background:#dcfce7;color:#14532d;}
.mhlp .flash.error{background:#fee2e2;color:#7f1d1d;}
/* Vorschau im Bildrahmen des Kopfbereichs – ersetzt den Screenshot */
.mhlp .shot.live{background:#fff;padding:22px;min-height:0;}
.mhlp .shot.live::after{content:none;}
.mhlp .vorschau-kopf{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#b45309;margin-bottom:14px;}
.mhlp .vorschau-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--bd);}
.mhlp .vorschau-zeile:last-of-type{border-bottom:none;}
.mhlp .vorschau-zeile span{color:var(--mut);font-size:.9rem;}
.mhlp .vorschau-zeile b{font-size:1.5rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.mhlp .vorschau-zeile b.o{color:#b45309;}
.mhlp .vorschau-fuss{margin-top:14px;font-size:.78rem;color:var(--mut);}
/* Kontaktfenster */
.ps-modal{position:fixed;inset:0;background:rgba(15,23,42,.62);display:none;align-items:flex-start;justify-content:center;z-index:9999;padding:24px;overflow-y:auto;}
.ps-modal.auf{display:flex;}
.ps-modal-box{background:#fff;border-radius:22px;max-width:560px;width:100%;padding:32px;position:relative;margin:auto;box-shadow:0 30px 80px rgba(15,23,42,.35);}
.ps-modal-box h2{font-size:1.4rem;font-weight:800;margin:0 0 6px;color:#0f172a;}
.ps-modal-box .sub{color:#64748b;font-size:.94rem;margin:0 0 22px;}
.ps-zu{position:absolute;top:16px;right:18px;border:none;background:none;font-size:1.7rem;line-height:1;color:#94a3b8;cursor:pointer;}
.ps-zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:900px){
  .mhlp .alter{grid-template-columns:repeat(2,1fr);}
  .mhlp .ampel{flex-direction:column;gap:3px;}
  .mhlp .ampel b{min-width:0;}
  .ps-zwei{grid-template-columns:1fr;}
  .ps-modal-box{padding:24px;}
}

/* ---- CMS-Einbettung: Bloecke im .mhlp-Muster innerhalb von seite.php ---- */
.cms-article:has(.mhlp) .cms-page-title{display:none !important;}
/* Nur Seiten, deren Inhalt selbst im Vorlagen-Aufbau steckt, laufen randlos. Seiten mit
   normalen CMS-Bloecken behalten ihren Textcontainer, der Seitenkopf steht davor. */
.cms-tpl .cms-article:has(.mhlp){max-width:none !important;margin:0 !important;padding:0 !important;}
.mhlp .slide-grid{text-align:left;}   /* die globale Klasse .hero aus style.css zentriert sonst hinein */
.mhlp .slide-grid.solo{grid-template-columns:1fr;}
.mhlp .slide-grid.solo .lead{max-width:760px;}
.mhlp.hoj-kopf .hero{padding-bottom:44px;}
.mhlp .shot.shot-medien{min-height:340px;padding:0;overflow:hidden;background:#eef2f7;}
.mhlp .shot.shot-medien::after{content:none;}
.mhlp .shot.ill{display:flex;align-items:center;justify-content:center;padding:46px;min-height:300px;
  background:linear-gradient(135deg,#f6a200 0%,#ffd166 100%);}
.mhlp .shot.ill img{width:auto;max-width:74%;max-height:250px;}
.mhlp .shot.ill::after{content:none;}
.mhlp .cards.vier{grid-template-columns:repeat(4,1fr);}
.mhlp .cards.vier .card{padding:22px;}
.mhlp .hero .lead + .lead{margin-top:12px;}
.mhlp .split .txt p + p{margin-top:14px;}
.mhlp .cta .fuss{font-size:.78rem;color:rgba(255,255,255,.55);margin:18px auto 0;position:relative;z-index:1;}
.mhlp .telnr{font-variant-numeric:tabular-nums;letter-spacing:.02em;}
@media(max-width:900px){.mhlp .cards.vier{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.mhlp .cards.vier{grid-template-columns:1fr;}}
/* Mehrzeilige Ueberschriften: enger Zeilenfall wie im Hero (Vorlage ist einzeilig, daher dort nie aufgefallen) */
.mhlp .sec-head h2,.mhlp .split h2,.mhlp .cta h2{line-height:1.16;}
.mhlp .sec-head .eyebrow{margin-bottom:2px;}